/* =============================================================================================
   LotMoose theme (light). Branding__Theme=lotmoose.

   The same screens, the same layout and the same behaviour as the Jira-style shell; only the
   look changes, to LotMoose's own: warm paper surfaces, forest green, one signal orange for
   the thing to do, Barlow for reading, Barlow Condensed for signage, Red Hat Mono for figures.
   Colours are the LotMoose site's light tokens (D:\LotMoose\design-export, Direction Board).

   Loaded last, after site.css and hobart-shell.css, and every rule starts html.lm so it can
   only apply where _ThemeHead switched it on. Nothing here is left/right specific, so the same
   file serves Arabic pages.
   ============================================================================================= */

html.lm body.jshell, html.lm body {
    --lm-bg: #F4EFE6; --lm-surface: #FBF8F2; --lm-surface2: #ECE5D8; --lm-card: #FFFDF9;
    --lm-ink: #14211B; --lm-ink2: #4A564F; --lm-line: #D8CFBE; --lm-line2: #E6DED0;
    --lm-accent: #F06A2A; --lm-accent-h: #E05A1B; --lm-on-accent: #1B0D04; --lm-accent-ink: #A9400F;
    --lm-forest: #1D3A2F; --lm-forest2: #2A4F41; --lm-on-forest: #F4EFE6; --lm-on-forest2: #C9D3CB;
    --lm-sel: #FAE3D4; --lm-antler: #8A6A3E;
}

html.lm body.jshell {
    --j-text: #14211B; --j-sub: #4A564F; --j-subtle: #5D6961; --j-faint: #8B938B;
    --j-border: #D8CFBE; --j-line: #E6DED0; --j-bg: #F4EFE6; --j-bg2: #EFE8DC; --j-col: #ECE5D8;
    --j-hover: rgba(29, 58, 47, .07); --j-press: rgba(29, 58, 47, .15);
    --j-blue: #A9400F; --j-blue-h: #8C340B; --j-blue-p: #6B2707; --j-sel: #FAE3D4;
    --j-red: #C94A3A; --j-redbg: #FBE6E1; --j-orange: #C98A1E; --j-orangebg: #FBF0DA; --j-orangeink: #865A0E;
    --j-green: #2F8A5F; --j-greenbg: #E1F1E7; --j-greenink: #22684A;
    --j-purple: #6B5B9A; --j-purplebg: #EFEBF7; --j-yellowbg: #FBF0DA; --j-yellowink: #765510;
    --j-shadow-card: 0 1px 1px rgba(20, 33, 27, .16), 0 0 1px rgba(20, 33, 27, .28);
    --j-shadow-pop: 0 10px 24px rgba(20, 33, 27, .16), 0 0 1px rgba(20, 33, 27, .30);
    --j-radius: 6px;
    --card: #FBF8F2; --accentbg2: #FDF0E7; --fieldline: #A79E8C; --navy2: #2A4F41;
    background: var(--lm-bg);
}

/* ---------------------------------------------------------------------------------- type */
html.lm body.jshell, html.lm body.jshell * { font-family: Barlow, "Segoe UI", system-ui, sans-serif; }
html.lm body.jshell { font-size: 15px; }
html.lm body.jshell .mono, html.lm body.jshell .cd, html.lm body.jshell .key, html.lm body.jshell kbd,
html.lm body.jshell code, html.lm body.jshell .tkkey, html.lm body.jshell .carids {
    font-family: "Red Hat Mono", ui-monospace, Consolas, monospace;
}
html.lm body.jshell .carstitle, html.lm body.jshell .carhero h1, html.lm body.jshell .intaketitle,
html.lm body.jshell .jdialog-head h2 {
    font-family: "Barlow Condensed", Barlow, sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: .005em; font-size: 28px; line-height: 30px;
}
html.lm body.jshell .panel h2, html.lm body.jshell .tkcolhead h2, html.lm body.jshell .boardcolhead,
html.lm body.jshell .jgroup-head, html.lm body.jshell .jsearch-grouphead, html.lm body.jshell .tkmovehead {
    font-family: "Barlow Condensed", Barlow, sans-serif; letter-spacing: .03em;
}
html.lm body.jshell .panel h2 { font-size: 18px; font-weight: 700; }
html.lm body.jshell .tkcolhead h2 { font-size: 14px; font-weight: 700; text-transform: uppercase; }
html.lm body.jshell .boardcolhead { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
html.lm body.jshell .jgroup-head { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--lm-antler); }
html.lm body.jshell table.cars td, html.lm body.jshell .tkcardfoot, html.lm body.jshell .num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------------- top bar */
html.lm body.jshell .jtop { background: var(--lm-forest); border-bottom: 0; color: var(--lm-on-forest); }
html.lm body.jshell .jtop .jicon, html.lm body.jshell .jtop .hbell { color: var(--lm-on-forest2); }
html.lm body.jshell .jtop .jicon:hover, html.lm body.jshell .jtop .hbell:hover { background: rgba(244, 239, 230, .12); color: var(--lm-on-forest); }
html.lm body.jshell .jtop .jicon:active { background: rgba(244, 239, 230, .2); }
html.lm body.jshell .jtop .jbrand { color: var(--lm-on-forest); }
html.lm body.jshell .jtop .jbrand:hover { background: rgba(244, 239, 230, .1); }
html.lm body.jshell .jbrand-mark { background: var(--lm-accent); color: var(--lm-on-accent); border-radius: 5px; font-family: "Barlow Condensed", sans-serif; font-weight: 800; }
html.lm body.jshell .jbrand-name { font-family: "Barlow Condensed", Barlow, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: .01em; }
html.lm body.jshell .jtop .jsearch input[type=search] {
    background: rgba(244, 239, 230, .1); border-color: rgba(244, 239, 230, .28); color: var(--lm-on-forest);
}
html.lm body.jshell .jtop .jsearch input[type=search]::placeholder { color: var(--lm-on-forest2); opacity: 1; }
html.lm body.jshell .jtop .jsearch input[type=search]:hover { background: rgba(244, 239, 230, .16); }
html.lm body.jshell .jtop .jsearch input[type=search]:focus {
    background: var(--lm-card); color: var(--lm-ink); border-color: var(--lm-accent); box-shadow: inset 0 0 0 1px var(--lm-accent);
}
html.lm body.jshell .jtop .jsearch-ic { color: var(--lm-on-forest2); }
html.lm body.jshell .jtop .jsearch.open .jsearch-ic { color: var(--j-subtle); }
html.lm body.jshell .jtop .jkbd { background: transparent; border-color: rgba(244, 239, 230, .35); color: var(--lm-on-forest2); }
html.lm body.jshell .hbellcount { background: var(--lm-accent); color: var(--lm-on-accent); }
html.lm body.jshell .jme .jav-btn:hover { background: rgba(244, 239, 230, .12); }

/* ------------------------------------------------------------------------------- buttons */
html.lm body.jshell .jbtn.primary, html.lm body.jshell .hbtn {
    background: var(--lm-accent); color: var(--lm-on-accent); font-weight: 600;
}
html.lm body.jshell .jbtn.primary:hover, html.lm body.jshell .hbtn:hover { background: var(--lm-accent-h); color: var(--lm-on-accent); }
html.lm body.jshell .jbtn.primary:active, html.lm body.jshell .hbtn:active { background: #C9500F; color: var(--lm-on-accent); }
html.lm body.jshell .hbtn.ghost { background: var(--j-hover); color: var(--j-sub); font-weight: 500; }
html.lm body.jshell .hbtn.ghost:hover { background: var(--j-press); color: var(--j-text); }
html.lm body.jshell .hbtn.danger, html.lm body.jshell .hbtn.red { background: var(--j-red); color: #fff; }
html.lm body.jshell .jicon:focus-visible, html.lm body.jshell .jbtn:focus-visible, html.lm body.jshell .jnav:focus-visible,
html.lm body.jshell summary:focus-visible, html.lm body.jshell .hbtn:focus-visible, html.lm body.jshell a:focus-visible {
    outline: 2px solid var(--lm-accent); outline-offset: 2px;
}

/* -------------------------------------------------------------------------- the sidebar */
html.lm body.jshell .jside { background: var(--lm-surface); border-right-color: var(--lm-line); border-inline-end-color: var(--lm-line); }
html.lm body.jshell .jnav { color: var(--lm-ink2); }
html.lm body.jshell .jnav:hover { color: var(--lm-ink); }
html.lm body.jshell .jnav.on { background: var(--lm-sel); color: var(--lm-accent-ink); font-weight: 600; }
html.lm body.jshell .jnav.on::before { background: var(--lm-accent); }
html.lm body.jshell .jscrim { background: rgba(20, 33, 27, .45); }

/* ------------------------------------------------------------------------------ surfaces */
html.lm body.jshell .panel, html.lm body.jshell .hobart .panel { background: var(--lm-surface); border-color: var(--lm-line); }
html.lm body.jshell .jmenu-pop, html.lm body.jshell .jsearch-pop, html.lm body.jshell .tkmove .tkmovepop,
html.lm body.jshell .jdialog, html.lm body.jshell .movelist { background: var(--lm-card); }
html.lm body.jshell .jdialog::backdrop { background: rgba(20, 33, 27, .55); }
html.lm body.jshell .emptystate { background: var(--lm-surface2); }
html.lm body.jshell table.cars { background: var(--lm-surface); border-color: var(--lm-line); }
html.lm body.jshell table.cars th { background: var(--lm-surface); }
html.lm body.jshell table.cars tbody tr:hover { background: #F6F1E8; }
html.lm body.jshell .chip { background: var(--lm-surface); border-color: var(--lm-line); }
html.lm body.jshell .chip.on { background: var(--lm-sel); border-color: var(--lm-accent); color: var(--lm-accent-ink); }
html.lm body.jshell .viewswitch.sub a.on { background: var(--lm-card); }
html.lm body.jshell .viewswitch a.on { color: var(--lm-ink); }
html.lm body.jshell .viewswitch a.on::after { background: var(--lm-accent); height: 3px; }

/* Fields: paper-white boxes, the orange ring when you are in one. */
html.lm body.jshell input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=search]),
html.lm body.jshell select, html.lm body.jshell textarea { background: var(--lm-card); }
html.lm body.jshell input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):focus,
html.lm body.jshell select:focus, html.lm body.jshell textarea:focus {
    background: var(--lm-card); border-color: var(--lm-accent); box-shadow: inset 0 0 0 1px var(--lm-accent);
}
html.lm body.jshell .bookfilters select { background: var(--j-hover); }
html.lm body.jshell input[type=checkbox], html.lm body.jshell input[type=radio] { accent-color: var(--lm-forest); }

/* Boards: sand columns, paper cards. */
html.lm body.jshell .tkcol, html.lm body.jshell .boardcol { background: var(--lm-surface2); }
html.lm body.jshell .tkcol.over, html.lm body.jshell .boardlist.dropok, html.lm body.jshell [data-dropzone].dropok {
    background: var(--lm-sel); box-shadow: inset 0 0 0 2px var(--lm-accent);
}
html.lm body.jshell .tkcard, html.lm body.jshell .boardcard { background: var(--lm-card); }
html.lm body.jshell .tkcard:hover, html.lm body.jshell .boardcard:hover { background: #F7F2E9; }
html.lm body.jshell .tkcard.p-urgent { background: #FFF6F2; }
html.lm body.jshell .tkmove > summary { background: var(--lm-card); }
html.lm body.jshell .tkcount, html.lm body.jshell .boardcount { background: rgba(29, 58, 47, .09); }
html.lm body.jshell .tkkey .ic { color: var(--lm-accent); }

/* Links read in the deep orange; quiet text links stay ink. */
html.lm body.jshell a { color: var(--lm-accent-ink); }
html.lm body.jshell .jcrumbs a, html.lm body.jshell .jnav, html.lm body.jshell .jbrand,
html.lm body.jshell .tkcardtitle, html.lm body.jshell .boardcard .carlink, html.lm body.jshell .jmenu-pop > a { color: inherit; }
html.lm body.jshell .jcrumbs a { color: var(--lm-ink2); }
html.lm body.jshell .tkcardtitle, html.lm body.jshell .boardcard .carlink { color: var(--lm-ink); }
html.lm body.jshell .jmenu-pop > a { color: var(--lm-ink); }
html.lm body.jshell .jbtn, html.lm body.jshell a.jbtn { color: var(--j-sub); }
html.lm body.jshell a.hbtn, html.lm body.jshell a.jbtn.primary { color: var(--lm-on-accent); }
html.lm body.jshell a.hbtn.ghost { color: var(--j-sub); }

/* The "Operated by LotMoose" line at the foot of the menu. */
html.lm body.jshell a.lm-by { color: var(--lm-ink2); }

/* The public demo's note under the breadcrumbs. */
html.lm body.jshell .demo-note, body.jshell .demo-note {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; padding: 8px 14px;
    border-radius: 8px; background: #1D3A2F; color: #F4EFE6; font-size: 14px;
}
body.jshell .demo-note b { font-weight: 700; }
body.jshell .demo-note a, html.lm body.jshell .demo-note a { color: #FFB27F; font-weight: 600; }

/* --------------------------------------------------------------------------- sign-in page */
html.lm body .login-shell { background: var(--lm-forest); }
html.lm body .login-card {
    background: var(--lm-surface); border: 0; border-radius: 12px; box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    color: var(--lm-ink); max-width: 420px;
}
html.lm body .login-card, html.lm body .login-card * { font-family: Barlow, "Segoe UI", system-ui, sans-serif; }
html.lm body .login-card .logo {
    font-family: "Barlow Condensed", Barlow, sans-serif; font-size: 28px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .01em; color: var(--lm-ink);
}
html.lm body .login-card .logo .dot { background: var(--lm-accent); border-radius: 3px; width: 12px; height: 12px; }
html.lm body .login-card .sub { color: var(--lm-ink2); font-size: 14px; }
html.lm body .login-card label { color: var(--lm-ink2); }
html.lm body .login-card .input { background: var(--lm-card); border-color: var(--lm-line); border-radius: 6px; color: var(--lm-ink); }
html.lm body .login-card .input:focus { outline: none; border-color: var(--lm-accent); box-shadow: 0 0 0 1px var(--lm-accent); }
html.lm body .login-card .btn { background: var(--lm-accent); color: var(--lm-on-accent); border: 0; border-radius: 6px; font-weight: 700; }
html.lm body .login-card .btn:hover { background: var(--lm-accent-h); }
html.lm body .login-card a { color: var(--lm-accent-ink); }
html.lm body .login-note { background: var(--lm-sel); color: var(--lm-ink); }

/* The public demo's "Try it as…" buttons. */
.demo-try { margin: 6px 0 18px; }
.demo-try h2 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A6A3E; }
.demo-try p { margin: 0 0 12px; font-size: 14px; color: #4A564F; }
.demo-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.demo-roles form { margin: 0; }
.demo-role {
    width: 100%; display: grid; gap: 2px; text-align: start; padding: 10px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid #D8CFBE; background: #FFFDF9; color: #14211B; font: inherit;
}
.demo-role:hover { border-color: #F06A2A; background: #FDF0E7; }
.demo-role:focus-visible { outline: 2px solid #F06A2A; outline-offset: 2px; }
.demo-role b { font-size: 15px; font-weight: 700; }
.demo-role span { font-size: 12.5px; color: #4A564F; }
.demo-or { display: block; margin: 16px 0 0; font-size: 13px; color: #4A564F; }
.demo-or summary { cursor: pointer; }
.demo-or[open] summary { margin-bottom: 12px; }