/* Tokens */
:root{
  /* Field palette: loam grounds, chalk text, leaf green for Primary and
     success, straw for actions and Promotions, rust for Spam. */
  --bg:#1e2219;--bg-side:#191d15;--surface:#232820;--surface-2:#20251c;--surface-3:#2c3325;
  --line:#353d2d;--line-strong:#4a533f;--line-soft:#2c3326;--grid:#252a1f;
  --text:#ecebdf;--text-2:#c9ccbc;--muted:#a8af9a;--faint:#8a927d;
  --accent:#9ccb6e;--accent-hover:#b4da8d;--accent-ink:#1a1e15;
  --straw:#e2c46e;--straw-hover:#eed894;
  --info:#8fb0c4;--warn:#e2c46e;--danger:#e8957a;
  /* Data labels use the text face with tabular figures; only code and IDs are monospaced. */
  --sans:'Nunito','IBM Plex Sans',system-ui,sans-serif;--display:'Baloo 2','Nunito',system-ui,sans-serif;
  --mono:var(--sans);--code:ui-monospace,'SF Mono',Menlo,Consolas,monospace;--serif:var(--display);
  --radius:6px;--radius-sm:5px;
  color-scheme:dark;font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--text);background:var(--bg);font-synthesis:none;-webkit-font-smoothing:antialiased
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--straw);outline-offset:2px}
h1,h2,h3,p{margin-top:0}
h1{font-family:var(--display);font-size:clamp(2rem,2.6vw,2.5rem);line-height:1.1;font-weight:600;letter-spacing:-.025em;margin-bottom:0}
h2{font-family:var(--display);font-size:1.15rem;line-height:1.3;font-weight:600}
h3{font-size:.85rem;font-weight:600}
a{color:var(--straw)}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* Brand */
.boot{min-height:100vh;display:flex;gap:14px;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem}
.boot p{margin:0}
.boot-sprout{width:56px;height:56px;color:var(--accent)}
.boot-sprout .soil{stroke:var(--line-strong)}
.boot-sprout .stem{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .7s ease-out .1s forwards}
.boot-sprout .leaf{transform-box:fill-box;animation:grow .6s cubic-bezier(.3,1.4,.5,1) both,sway 3s ease-in-out 1.4s infinite}
.boot-sprout .left{transform-origin:100% 100%;animation-delay:.6s,1.4s}
.boot-sprout .right{transform-origin:0 100%;animation-delay:.8s,1.6s}
@keyframes sway{50%{transform:rotate(4deg)}}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;letter-spacing:-.02em;white-space:nowrap}
.env-tag{margin-left:auto;font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:0;color:var(--faint);border:1px solid var(--line-strong);border-radius:6px;padding:1px 6px}

/* Sign-in */
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(300px,1fr) minmax(430px,46%)}
.login-art{position:relative;overflow:hidden;background-color:#141a12;border-right:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center}
/* Cartoon dawn in the mascot's style: ink outlines, flat fills. A planter tractor sows the row and crops grow, ripen and clear behind it. */
.field-scene{position:absolute;inset:0;width:100%;height:100%}
.field-scene .ink{stroke:#11140e;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.field-scene .star{fill:#e9e4d2;opacity:.6;animation:twinkle 3.5s ease-in-out var(--d) infinite}
.field-scene .sun{animation:sun-up 2.6s cubic-bezier(.2,.7,.2,1) both}
.field-scene .sun-halo{animation:halo 6s ease-in-out infinite}
.field-scene .rays,.field-scene .blades{transform-box:fill-box;transform-origin:center}
.field-scene .rays{animation:spin 40s linear infinite}
.field-scene .blades{animation:spin 6s linear infinite}
.field-scene .cloud{animation:cloud-drift 80s linear infinite}
.field-scene .cloud.c2{animation-duration:110s;animation-delay:-60s}
.field-scene .cloud.c1{animation-delay:-25s}
.field-scene .furrow{fill:none;stroke:#6b4426;stroke-width:4;stroke-linecap:round;stroke-dasharray:8 14;animation:furrow-in 1.8s ease-out calc(var(--i) * 120ms + .3s) both}
.field-scene .sprout,.field-scene .crop{transform-box:fill-box;transform-origin:50% 100%}
.field-scene .sprout{animation:grow .9s cubic-bezier(.3,1.4,.5,1) var(--d) both,sway 3.4s ease-in-out calc(var(--d) + 1s) infinite}
.field-scene .crop{animation:crop-cycle 12s linear var(--d) infinite backwards}
.field-scene .crop .head{animation:ripen 12s linear var(--d) infinite backwards}
.field-scene .rig{transform:translateX(150px);animation:sow-run 12s linear infinite}
.field-scene .rig .body{animation:chug .3s ease-in-out infinite alternate}
.field-scene .rig .wheel{transform-box:fill-box;transform-origin:center;animation:roll 1.1s linear infinite}
.field-scene .rig .puffs circle{fill:#e9e4d2;stroke:#11140e;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:sow-puff 1.6s ease-out infinite}
.field-scene .rig .puffs circle:nth-child(2){animation-delay:.55s}
.field-scene .rig .puffs circle:nth-child(3){animation-delay:1.1s}
.field-scene .rig .seeds circle{fill:#f0c75a;stroke:#11140e;stroke-width:1.5;opacity:0;animation:sow-seed .6s linear infinite}
.field-scene .rig .seeds circle:nth-child(2){animation-delay:.2s}
.field-scene .rig .seeds circle:nth-child(3){animation-delay:.4s}
@keyframes sun-up{from{transform:translateY(160px)}}
@keyframes cloud-drift{from{transform:translateX(-260px)}to{transform:translateX(860px)}}
@keyframes furrow-in{from{opacity:0;transform:translateX(-40px)}}
@keyframes sow-run{from{transform:translateX(-160px)}to{transform:translateX(760px)}}
@keyframes sow-puff{0%{opacity:.9;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(-22px,-26px) scale(1.8)}}
@keyframes sow-seed{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(18px)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{transform:translateY(60px);opacity:0}}
@keyframes halo{50%{opacity:.6}}
@keyframes twinkle{50%{opacity:.12}}
@keyframes grow{from{transform:scale(0);opacity:0}}
.login-panel{max-width:520px;width:100%;align-self:center;justify-self:center;padding:48px}
.login-panel .login-brand{gap:15px;margin-bottom:3.5rem}
.login-panel .login-brand h1{font-size:clamp(2.8rem,5vw,4rem);font-weight:500;letter-spacing:-.06em;line-height:1;margin:0}
.login-panel form{max-width:380px}
.login-panel label,.dialog label{display:block;font-weight:500;font-size:.82rem;color:var(--text-2);margin-bottom:1rem}
.login-panel input,.dialog input:not([type=checkbox]):not([type=file]),.dialog textarea,.dialog select,.label-controls input{display:block;width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);padding:.72rem .85rem;margin-top:.45rem}
.login-panel input{padding:.9rem 1rem}
.login-panel .primary{width:100%;margin-top:.45rem}
.tractor-play{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;margin-top:12px;padding:9px 10px;background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:.78rem;color:var(--text-2)}
.tractor-play:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--surface-3)}
.tractor-play>span:first-child{display:flex;width:28px;height:24px;overflow:hidden}
.tractor-play>span:first-child svg{width:28px;height:24px}
.inline-error{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);padding:.7rem .8rem;border-radius:var(--radius-sm);font-size:.85rem}

/* Shell */
.app-shell{--side-w:232px;position:relative;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;background-color:var(--bg)}
.sidebar{z-index:2;min-width:0;background:var(--bg-side);border-right:1px solid var(--line-soft);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:22px 14px}
.side-top{padding:0 8px 22px}
.sidebar nav{display:flex;flex-direction:column;flex:1;gap:1px}
.sidebar nav .farm-life-link{margin-top:auto;border-top:1px solid var(--line-soft);border-radius:0;padding-top:12px;padding-bottom:12px}
.sidebar nav a{flex-shrink:0}
.workspace.farm-view{padding:0;min-height:100svh;pointer-events:none}
.sidebar nav a{background:none;border:0;color:var(--muted);text-decoration:none;border-radius:8px;text-align:left;min-height:40px;padding:0 12px;display:flex;gap:10px;align-items:center;font-size:.875rem}
.sidebar nav a:hover{background:var(--surface);color:var(--text)}
.sidebar nav a.active{background:var(--surface-3);color:var(--text)}
.nav-icon{width:18px;height:18px;flex:none;color:var(--faint);transition:color .15s,filter .15s}
.sidebar nav a:hover .nav-icon{color:var(--text)}
.active .nav-icon{color:var(--straw)}
.nav-icon .blades{transform-origin:12px 9px;transform-box:view-box}
.sidebar nav a:hover .blades,.active .nav-icon .blades{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav-count{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--faint)}
.side-label{font-size:.78rem;font-weight:600;color:var(--text-2)}
.side-farm{--wheat:#e9c46a;margin-top:auto;width:100%;height:60px;margin-bottom:10px;overflow:hidden}
.side-farm .soil{stroke:var(--line-strong);stroke-width:1.5}
.side-farm .furrows{stroke:color-mix(in srgb,var(--wheat) 25%,transparent);stroke-width:1.2;stroke-dasharray:3 5}
.side-farm .crop{stroke:var(--accent);stroke-width:1.3;transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);animation:crop-cycle 9s linear var(--d) infinite backwards;filter:drop-shadow(0 0 2px color-mix(in srgb,var(--accent) 60%,transparent))}
.side-farm .crop .head{stroke:var(--wheat);opacity:0;animation:ripen 9s linear var(--d) infinite backwards}
.side-farm .planter{stroke:var(--wheat);stroke-width:1.5;animation:plant-run 9s linear infinite;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--wheat) 70%,transparent))}
.side-farm .chassis,.side-farm .drill{animation:chug .3s ease-in-out infinite alternate}
.side-farm .wheel{transform-box:fill-box;transform-origin:center;animation:roll .9s linear infinite}
.side-farm .seeds circle{fill:var(--wheat);stroke:none;opacity:0;animation:seed-drop .6s linear infinite}
.side-farm .seeds circle:nth-child(2){animation-delay:.2s}
.side-farm .seeds circle:nth-child(3){animation-delay:.4s}
.side-farm .puffs circle{fill:var(--wheat);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;animation:puff 1.6s ease-out infinite}
.side-farm .puffs circle:nth-child(2){animation-delay:.8s}
@keyframes plant-run{from{transform:translateX(-60px)}to{transform:translateX(220px)}}
@keyframes seed-drop{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(8px)}}
@keyframes crop-cycle{0%{transform:scale(0)}6%{transform:scale(.45)}55%{transform:scale(1)}79%{transform:scale(1)}82%,100%{transform:scale(0)}}
@keyframes ripen{0%,45%{opacity:0}60%,79%{opacity:1}82%,100%{opacity:0}}
.side-health{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:grid;gap:9px;font-size:.75rem}
.side-health div{display:flex;justify-content:space-between;gap:8px;color:var(--muted)}
.side-health strong{font-family:var(--mono);font-weight:400;color:var(--text)}
.side-health strong.ok{color:var(--accent)}
.side-health strong.warn{color:var(--warn)}
.side-health strong.bad{color:var(--danger)}
.side-health .side-note{margin-top:-6px;color:var(--faint);font-size:.68rem;line-height:1.35}
.side-bottom{padding:16px 8px 0;display:grid;gap:6px;overflow:hidden}
.side-bottom span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.side-bottom button{border:0;background:none;color:var(--faint);text-align:left;padding:0;font-size:.78rem;width:max-content}
.side-bottom button:hover{color:var(--text)}
.workspace{position:relative;z-index:1;min-width:0;padding:0 32px 48px}
.topbar{height:60px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;color:var(--faint);font-size:.8rem}
.topbar strong{color:var(--text);font-weight:500}
.separator{margin:0 10px;color:var(--line-strong)}
.today{color:var(--faint);font-family:var(--mono);font-size:.72rem}
.topbar-right{display:flex;align-items:center;gap:18px;min-width:0}

/* Page heads & buttons */
.page-head,.mail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;padding:30px 0 22px}
.page-head p:last-child:not(.kicker),.mail-head p:last-child:not(.kicker){color:var(--muted);margin:.6rem 0 0;font-size:.85rem}
.kicker{font-size:.84rem;color:var(--muted);margin-bottom:.35rem}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.primary,.subtle{border-radius:var(--radius);min-height:40px;padding:0 15px;font-weight:600;font-size:.82rem;white-space:nowrap}
.primary{background:var(--straw);color:var(--accent-ink);border:0}
.primary:hover:not(:disabled){background:var(--straw-hover)}
.primary.large{min-height:46px}
.subtle{background:transparent;border:1px solid var(--line-strong);color:var(--text);font-weight:500}
.subtle:hover:not(:disabled){background:var(--surface-3)}
.text-button{border:0;background:none;color:var(--straw);font-weight:500;font-size:.78rem;padding:4px}
.text-button:hover{color:var(--straw-hover)}
.icon-button{border:0;background:none;color:var(--muted);font-size:1.25rem;line-height:1;min-width:32px;min-height:32px;border-radius:8px}
.icon-button:hover:not(:disabled){background:var(--surface-3);color:var(--text)}
.banner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:10px 14px;border-radius:var(--radius);margin-top:16px;font-size:.84rem;border:1px solid}
.banner button{background:none;border:0;color:inherit;font-size:1.2rem}
.banner.error{background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:color-mix(in srgb,var(--danger) 35%,transparent);color:var(--danger)}
.banner.success{background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}
.banner.connection{background:color-mix(in srgb,var(--info) 8%,transparent);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--info)}
.banner.connection div{display:flex;gap:1rem}

/* Panels, stats */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;min-width:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:8px}
.panel h2{margin:0}
.panel pre,.job-dialog pre{max-height:330px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:14px;color:var(--text-2);font-family:var(--code);font-size:.74rem}
.overview-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.stat{background:var(--surface);border:0;border-radius:var(--radius);padding:16px 18px;min-height:98px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stat span{font-size:.84rem;color:var(--muted)}
.stat strong{font-family:var(--display);font-size:2.1rem;font-weight:500;line-height:1.1}
.stat small{color:var(--muted);font-size:.78rem;margin-top:auto}
/* Headline figures sit open on the page, divided by rules rather than boxed. */
.overview-grid .stat{background:none;border-radius:0;border-left:1px solid var(--line);padding:2px 20px;min-height:0}
.stat[data-tone=ok]{--tone:var(--accent)}
.stat[data-tone=info]{--tone:var(--info)}
.stat[data-tone=warn]{--tone:var(--warn)}
.stat[data-tone=bad]{--tone:var(--danger)}
.stat[data-tone=neutral]{--tone:var(--text)}
.stat[data-tone=warn] strong,.stat[data-tone=warn] small{color:var(--warn)}
.stat[data-tone=bad] strong,.stat[data-tone=bad] small{color:var(--danger)}
.split-panels,.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;align-items:start}
.overview-panels{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;margin-top:14px;align-items:stretch}
.rows{display:grid}
.data-row{padding:11px 0;border:0;border-top:1px solid var(--line-soft);background:none;display:flex;text-align:left;gap:12px;align-items:center;color:var(--text);font-size:.8rem;width:100%}
button.data-row:hover{background:var(--surface-3);margin:0 -8px;padding-left:8px;padding-right:8px;width:calc(100% + 16px);border-radius:8px}
.data-row>span:first-child{display:grid;gap:3px;min-width:0;flex:1}
.data-row strong{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.data-row small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.data-row time{color:var(--faint);font-size:.7rem;white-space:nowrap}
.empty{text-align:center;padding:64px 24px;color:var(--muted);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);font-size:.85rem}
.empty::before{content:'';display:block;width:64px;height:48px;margin:0 auto 14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 44c10-4 38-4 48 0' stroke='%232b3b33'/%3E%3Cpath d='M32 43V24M32 31c0-6-4-9-10-9 0 6 4 9 10 9zM32 27c0-7 5-11 12-11 0 7-5 11-12 11z' stroke='%239ccb6e'/%3E%3C/svg%3E") no-repeat center/contain;transform-origin:50% 100%;animation:grow .8s cubic-bezier(.3,1.4,.5,1) both,sway 4s ease-in-out 1s infinite}
.empty.compact::before{width:44px;height:33px;margin-bottom:10px}
.empty strong{display:block;color:var(--text);font-size:1rem;font-weight:600}
.empty p{margin:8px auto 18px;max-width:44ch;line-height:1.5}
.empty.compact{border:0;background:none;padding:30px 16px}

/* Chart & outcome bars */
.chart{display:grid;gap:6px}
.chart svg{width:100%;height:170px;display:block}
.chart-axis{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.72rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:3px;border-radius:2px;background:var(--c)}
.outcome-bar{display:flex;gap:1px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;min-width:80px}
.outcome-bar i{display:block;height:100%;background:var(--c)}
.outcome-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px 16px;margin-top:14px}
.outcome-list div{display:grid;gap:2px;font-size:.72rem;color:var(--muted)}
.outcome-list strong{font-family:var(--display);font-weight:500;font-size:1.3rem;color:var(--c,var(--text))}

/* Tables & toolbars */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.search-box{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);display:flex;align-items:center;padding:0 12px;gap:8px;color:var(--faint);min-width:250px}
.search-box svg{width:14px;height:14px;flex:none}
.search-box input{border:0;outline:0;padding:9px 0;color:var(--text);background:transparent;width:100%;font-size:.82rem}
.search-box input::placeholder{color:var(--faint)}
.search-box:focus-within{border-color:var(--line-strong);outline:2px solid var(--straw);outline-offset:1px}
.toolbar .search-box{width:320px}
.toolbar select{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);padding:9px 10px;font-size:.8rem}
.segmented{display:flex;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px}
.segmented button{border:0;background:transparent;color:var(--muted);border-radius:6px;min-height:28px;padding:0 10px;font-size:.78rem}
.segmented button[aria-pressed=true]{background:var(--text);color:var(--bg)}
.count{color:var(--faint);font-size:.7rem;margin-left:auto}
.table-wrap{overflow:auto;background:var(--surface);border:0;border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;text-align:left;font-size:.8rem}
th{padding:11px 13px;background:transparent;color:var(--muted);font-weight:500;font-size:.8rem;white-space:nowrap;border-bottom:1px solid var(--line)}
td{padding:12px 13px;border-top:1px solid var(--line-soft);vertical-align:middle}
tbody tr:hover td{background:color-mix(in srgb,var(--surface-3) 55%,transparent)}
td input[type=checkbox],.checkbox-list input{accent-color:var(--accent);width:16px;height:16px}
.account-link{border:0;background:none;color:var(--text);text-align:left;padding:0;display:grid;gap:3px}
.account-link strong{font-weight:500;font-size:.84rem}
.account-link:hover strong{color:var(--straw)}
.account-link small,.cell-sub{color:var(--faint);font-size:.72rem}
.cell-sub{display:block;margin-top:3px;white-space:nowrap}
.mono-cell{font-size:.8rem;color:var(--text-2);white-space:nowrap}
.row-result{display:block;margin-top:6px;font-size:.72rem;color:var(--accent)}
.row-error{display:block;color:var(--danger);margin-top:4px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.72rem}
.status{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:.76rem;white-space:nowrap;text-transform:capitalize}
.status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
.status.ok{color:var(--accent)}
.status.ok::before{background:var(--accent)}
.status.alert{color:var(--danger)}
.status.alert::before{background:var(--danger)}
.status.warning{color:var(--warn)}
.status.warning::before{background:var(--warn)}
.status.info{color:var(--info)}
.status.info::before{background:var(--info)}
.action-menu{display:flex;gap:5px;flex-wrap:wrap;min-width:200px}
.action-menu button,.reader-actions button,.label-controls button,.link-row button{border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-2);border-radius:7px;min-height:28px;padding:0 9px;font-weight:500;font-size:.72rem}
.action-menu button:hover:not(:disabled),.reader-actions button:hover,.label-controls button:hover:not(:disabled),.link-row button:hover{background:var(--surface-3);color:var(--text)}
.action-menu .danger-text{color:var(--danger)}
.switch{width:34px;height:20px;border-radius:999px;border:0;background:var(--line);padding:2px;display:flex;flex:none}
.switch span{width:16px;height:16px;border-radius:50%;background:var(--faint);transition:transform .15s}
.switch[aria-pressed=true]{background:var(--accent)}
.switch[aria-pressed=true] span{background:var(--accent-ink);transform:translateX(14px)}
.chip-row{display:flex;gap:4px;flex-wrap:wrap}
.chip{font-size:.76rem;padding:2px 8px;border-radius:4px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-2);white-space:nowrap}
.muted-row td{color:var(--faint)}
.dot{padding:0 5px}

/* Settings sections (rules, activity) */
.settings-section{margin:24px 0 28px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 12px}
.section-heading h2{margin:0 0 3px}
.section-heading p{font-size:.78rem;color:var(--faint);margin:0}
.rule-explainer,.report-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;color:var(--muted);font-size:.8rem;line-height:1.55;margin-bottom:18px}
.rule-explainer summary{cursor:pointer;color:var(--text);font-weight:500}
.rule-explainer p{margin:8px 0 0}
.report-note strong{font-size:.85rem;color:var(--text);font-weight:500}
.report-note p{margin:5px 0 0}
.activity-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.activity-table-wrap{overflow:auto;margin-top:12px}
.activity-table-wrap table td,.activity-table-wrap table th{padding:9px 8px}
.event-subject{display:block;color:var(--faint);margin-top:4px}
.event-detail{max-width:220px;overflow-wrap:anywhere}
.broadcast-sender{max-width:190px;overflow-wrap:anywhere}
.broadcast-subject{min-width:180px;max-width:350px;overflow-wrap:anywhere}

/* Mailbox */
.mailbox-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.picker-card{display:grid;gap:4px;justify-items:start;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;color:var(--text);min-width:0}
.picker-card:hover{border-color:var(--line-strong)}
.picker-email{font-family:var(--mono);font-size:.82rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-card small{color:var(--faint);font-size:.74rem}
.picker-card .status{margin-top:6px}
.mailbox-switch{border:1px solid var(--line-strong);background:var(--surface);color:var(--text);border-radius:var(--radius);min-height:38px;padding:0 10px;font-family:var(--mono);font-size:.76rem;max-width:260px}
.repair-note{background:color-mix(in srgb,var(--warn) 9%,transparent);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:var(--radius);padding:12px 14px;color:var(--warn);margin-bottom:14px;font-size:.8rem}
.mail-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;min-height:570px}
.folder-rail,.message-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.folder-rail{padding:10px 8px}
.rail-heading{font-size:.8rem;font-weight:600;color:var(--text-2);padding:8px 11px 10px}
.folder-rail button:not(.rail-refresh){display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;border-radius:7px;padding:8px 11px;color:var(--muted);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
.folder-rail button:not(.rail-refresh):hover{background:var(--surface-3);color:var(--text)}
.folder-rail button.current{background:var(--surface-3);color:var(--text)}
.folder-rail button span{font-size:.9rem;color:var(--faint)}
.folder-rail button.current span{color:var(--accent)}
.rail-empty{color:var(--faint);font-size:.76rem;padding:0 11px}
.rail-refresh{border:0;background:none;color:var(--accent);margin:14px 11px;font-size:.74rem}
.list-toolbar{padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line-soft);gap:10px}
.list-toolbar form{display:flex;gap:7px;flex:1;max-width:540px}
.list-toolbar .search-box{flex:1;min-width:0}
.list-heading{padding:14px 16px;display:flex;align-items:baseline;gap:12px}
.list-heading strong{font-family:var(--mono);font-weight:500;font-size:.9rem}
.list-heading span{color:var(--faint);font-size:.72rem}
.list-heading .mailbox-sync-status{margin-left:auto;flex:none;visibility:hidden;color:var(--muted);white-space:nowrap}
.list-heading .mailbox-sync-status.syncing{visibility:visible}
.message-rows{border-top:1px solid var(--line-soft)}
.message-row{position:relative;display:grid;grid-template-columns:10px minmax(120px,22%) minmax(120px,25%) minmax(120px,1fr) auto;gap:12px;align-items:center;width:100%;border:0;border-bottom:1px solid var(--line-soft);background:transparent;padding:11px 16px;text-align:left;color:var(--muted);font-size:.8rem}
.message-row:hover,.message-row.chosen{background:var(--surface-3)}
.message-row.waiting{background:color-mix(in srgb,var(--info) 7%,var(--surface));box-shadow:inset 3px 0 var(--info)}
.message-row.waiting>span:not(.message-row-status){visibility:hidden}
.message-row-status{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 16px;color:var(--muted);font-weight:400}
.message-row-status>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-row.unread{color:var(--text);font-weight:600}
.read-dot{width:6px;height:6px;border-radius:50%;background:transparent}
.unread .read-dot{background:var(--accent)}
.message-row .sender,.message-row .subject,.message-row .snippet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-row .snippet{color:var(--faint);font-weight:400}
.row-tail{white-space:nowrap;color:var(--faint);font-family:var(--mono);font-size:.7rem;font-weight:400}
.mailbox-status{display:flex;align-items:center;gap:12px;margin:0 12px 12px;padding:11px 14px;border:1px solid color-mix(in srgb,var(--info) 30%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--info) 7%,transparent);color:var(--info);font-size:.78rem;line-height:1.4}
.mailbox-status div{flex:1;min-width:0}
.mailbox-status strong{display:block;font-size:.82rem;font-weight:600}
.mailbox-status p{margin:0;color:var(--muted)}
.mailbox-status strong+p{margin-top:2px}
.mailbox-status .subtle{min-height:30px;font-size:.74rem;padding:0 10px}
.mailbox-status-error{border-color:color-mix(in srgb,var(--danger) 35%,transparent);background:color-mix(in srgb,var(--danger) 8%,transparent);color:var(--danger)}
.tractor{flex:none;color:var(--info);overflow:visible}
.tractor.mini{width:34px;height:23px}
.mailbox-status-error .tractor{color:var(--danger)}
.tractor .chassis{animation:chug .35s ease-in-out infinite alternate}
.tractor .wheel{transform-box:fill-box;transform-origin:center;animation:roll 1.2s linear infinite}
.tractor .puffs circle{fill:currentColor;stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;animation:puff 1.8s ease-out infinite}
.tractor .puffs circle:nth-child(2){animation-delay:.6s}
.tractor .puffs circle:nth-child(3){animation-delay:1.2s}
@keyframes chug{to{transform:translateY(-1px)}}
@keyframes roll{to{transform:rotate(360deg)}}
@keyframes puff{0%{opacity:.55;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-14px,-12px) scale(2.2)}}
@keyframes drive{from{transform:translateX(-90px)}to{transform:translateX(690px)}}
.status-pulse{width:8px;height:8px;flex:none;border-radius:50%;background:var(--info);box-shadow:0 0 0 4px color-mix(in srgb,var(--info) 18%,transparent);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--info) 4%,transparent)}}

/* Reader drawer */
.reader-backdrop,.modal-backdrop{position:fixed;inset:0;background:#030604b3;backdrop-filter:blur(2px);z-index:30}
/* Email replaces the mailbox list in the workspace, with one dedicated reading viewport. */
.reader{width:100%;height:calc(100dvh - 114px);min-height:540px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden}
.reader-top{padding:12px 20px;display:flex;gap:16px;align-items:center;border-bottom:1px solid var(--line);flex-shrink:0}
.reader-account{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.reader-replies{display:flex;gap:8px;margin-left:auto}.reader-back{white-space:nowrap}
.reader-scroll{display:flex;flex-direction:column;min-height:0;flex:1;padding:18px 22px 0;overflow:hidden}
.reader-scroll h2{font-family:var(--serif);font-weight:400;font-size:1.8rem;line-height:1.15;margin:0 0 10px;flex-shrink:0;max-height:4.2em;overflow:auto}
.reader-addresses{flex-shrink:0;font-size:.8rem}.reader-addresses summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:8px}.reader-addresses summary span{overflow-wrap:anywhere}.reader-addresses small{color:var(--muted)}.reader-addresses .message-meta{padding:10px 0;max-height:120px;overflow:auto}
.reader-tools{flex-shrink:0;margin-top:10px;border-top:1px solid var(--line)}.reader-tools>summary{cursor:pointer;padding:14px 0;font-size:.8rem;color:var(--text-2)}.reader-tools-content{max-height:30vh;overflow:auto;padding-right:12px}.preview-note{font-size:.7rem;color:var(--muted);margin-left:auto;margin-right:12px}
.message-meta{border-bottom:1px solid var(--line-soft);padding-bottom:14px;display:grid;gap:7px;font-size:.8rem}
.message-meta div{display:grid;grid-template-columns:55px 1fr;gap:10px}
.message-meta span{color:var(--faint)}
.message-meta strong{font-weight:500}
.reader-actions{display:flex;gap:6px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.reader-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px}
.reader-actions button[aria-busy=true]{opacity:1;color:var(--accent);border-color:var(--accent);cursor:progress}
.category-move{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.category-move label{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:.72rem;font-weight:500}
.category-move select{min-height:34px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface-2);color:var(--text);padding:0 8px;font:inherit;font-size:.72rem}
.category-move select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.action-spinner{width:13px;height:13px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .75s linear infinite}
.message-action-feedback{margin:12px 0 0;font-size:.82rem;color:var(--accent)}
.message-action-feedback.inline-error{color:var(--danger)}
.content-toggle{display:flex;justify-content:space-between;padding:16px 0 10px;font-size:.82rem}
.content-toggle button{border:0;background:none;color:var(--accent);font-size:.75rem}
.reader iframe{display:block;flex:1;min-height:160px;height:100%;width:100%;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.plain-body{flex:1;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--code);font-size:.78rem;line-height:1.65;margin:0;min-height:180px;color:var(--text-2)}
.detail-section{border-top:1px solid var(--line-soft);padding:16px 0}
.detail-section h3{margin-bottom:10px}
.detail-section .help{margin-bottom:12px}
.attachment,.link-row{display:flex;align-items:center;gap:11px;padding:8px 0}
.attachment span{background:var(--surface-3);padding:9px;border-radius:8px;color:var(--accent)}
.attachment div,.link-row div{display:grid;gap:3px;min-width:0;flex:1;font-size:.76rem}
.attachment small,.link-row small{color:var(--faint);overflow-wrap:anywhere;font-family:var(--mono);font-size:.68rem}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{border-radius:999px;background:var(--surface-3);border:1px solid var(--line-strong);color:var(--text-2);padding:4px 10px;font-size:.72rem}
.chips button{border:0;background:none;color:var(--muted)}
.label-controls{display:flex;gap:7px}
.label-controls input{margin:0;max-width:270px;padding:7px 10px}
.reader-footer{justify-content:flex-end;gap:8px;border-top:1px solid var(--line-soft);border-bottom:0;text-transform:none;letter-spacing:0;font-family:var(--sans)}

/* Dialogs */
.dialog{position:fixed;z-index:41;top:50%;left:50%;transform:translate(-50%,-50%);width:min(580px,94vw);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 30px 80px #000c,0 0 60px -30px color-mix(in srgb,var(--accent) 40%,transparent);padding:22px 24px}
.modal-backdrop{z-index:40}
.dialog-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:12px}
.dialog-head h2{font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1.05;margin:0}
.dialog-head .kicker{margin-bottom:.35rem}
.help{color:var(--muted);font-size:.78rem;line-height:1.55}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.form-grid .wide{grid-column:span 2}
.checkbox-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:8px 0}
.checkbox-list label{font-weight:400;margin:0;display:flex;align-items:center;gap:8px;color:var(--text-2)}
.dialog-actions{border-top:1px solid var(--line-soft);padding-top:16px;margin-top:18px;display:flex;justify-content:flex-end;gap:8px}
.small-dialog{width:min(450px,94vw)}
.compose-dialog{width:min(670px,94vw)}
.rule-dialog{width:min(660px,94vw)}
.dialog textarea{resize:vertical;line-height:1.5}
.dialog details{font-size:.8rem;margin:0 0 15px;color:var(--muted)}
.dialog details label{margin-top:9px}
.file-label input{display:block;margin-top:8px;font-size:.74rem}
.job-dialog dl{display:grid;grid-template-columns:90px 1fr;gap:8px;font-size:.8rem;overflow-wrap:anywhere}
.job-dialog dt{color:var(--faint)}
.job-dialog dd{margin:0}
.job-dialog h3{margin:18px 0 8px}

/* Motion: content animates when it is inserted, so view changes, dialogs and loaded rows flow in without extra markup. */
html{scroll-behavior:smooth}
.chart-line.completed,.chart-line.failed{stroke-dasharray:3000;stroke-dashoffset:3000;animation:draw 1.4s cubic-bezier(.4,0,.2,1) .25s forwards}
.chart-line.evaluated,.chart-area{animation:fade-in 1s ease-out .6s both}
.outcome-bar i{transform-origin:left center;animation:bar-grow .9s cubic-bezier(.2,.7,.2,1) .3s both}
.modal-backdrop,.reader-backdrop,.workspace>.modal-backdrop,.workspace>.reader-backdrop{animation:fade-in .2s ease-out both}
.dialog,.workspace>.dialog{animation:dialog-in .28s cubic-bezier(.2,.8,.3,1.1) both}
.reader,.workspace>.reader{animation:fade-in .15s ease-out both}
.reader-scroll>*{animation:none}
.banner,.inline-error,.repair-note{animation:banner-in .3s cubic-bezier(.2,.7,.2,1) both}
.rule-explainer[open] p{animation:rise-in .3s ease-out both}
.active .nav-icon{animation:sprout-pop .45s cubic-bezier(.3,1.6,.5,1)}
.sidebar nav a{transition:background-color .15s,color .15s,transform .15s}
.sidebar nav a:hover:not(.active){transform:translateX(2px)}
.primary,.subtle,.action-menu button,.reader-actions button,.label-controls button,.link-row button,.segmented button,.text-button,.icon-button{transition:background-color .15s,color .15s,border-color .15s,box-shadow .2s,transform .1s}

button:active:not(:disabled){transform:scale(.97)}
.panel,.stat,.picker-card,.table-wrap{transition:border-color .2s,box-shadow .25s,transform .25s}
.stat:hover,.picker-card:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.workspace>.mail-head,.workspace>.mail-layout{animation:none}
.message-row:active:not(:disabled){transform:none}
tbody tr td,.message-row,.data-row{transition:background-color .15s}
.status::before{transition:box-shadow .2s}
.search-box,.toolbar select,.mailbox-switch,.login-panel input,.dialog input,.dialog select,.dialog textarea{transition:border-color .15s,outline-color .15s,box-shadow .2s}
@keyframes rise-in{from{opacity:0;transform:translateY(10px)}}
@keyframes pop-in{from{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes fade-in{from{opacity:0}}
@keyframes bar-grow{from{transform:scaleX(0)}}
@keyframes dialog-in{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}}
@keyframes drawer-in{from{transform:translateX(40px);opacity:0}}
@keyframes banner-in{from{opacity:0;transform:translateY(-6px)}}
@keyframes sprout-pop{0%{transform:scale(.6) rotate(-12deg)}100%{transform:none}}
@keyframes ping{75%,100%{transform:scale(2.6);opacity:0}}

/* Responsive */
@media(max-width:1560px){.overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1250px){.activity-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.overview-panels{grid-template-columns:1fr}}
@media(max-width:1150px){.workspace{padding:0 22px 40px}.message-row{grid-template-columns:10px minmax(100px,25%) minmax(100px,1fr) auto}.message-row .snippet{display:none}}
@media(max-width:820px){
  .app-shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{height:auto;position:static;padding:12px 10px}
  .side-top{padding:0 6px 10px}
  .side-health,.side-bottom,.side-farm{display:none}
  .sidebar nav{display:flex;flex-direction:row;flex:none;overflow:auto;scrollbar-width:none}
  .sidebar nav .farm-life-link{margin-top:0;border-top:0;border-left:1px solid var(--line-soft);padding-top:0;padding-bottom:0}
  .workspace.farm-view{min-height:calc(100svh - 110px)}
  .sidebar nav a{white-space:nowrap}
  .nav-count{display:none}
  .workspace{padding:0 16px 32px}
  .topbar{height:46px}
  .today{display:none}
  .overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-panels,.ops-grid{grid-template-columns:1fr}
  .mail-layout{grid-template-columns:1fr}
  .folder-rail{display:flex;align-items:center;overflow:auto;white-space:nowrap;padding:5px}
  .folder-rail button:not(.rail-refresh){width:auto;flex:none}
  .rail-heading,.rail-refresh,.rail-empty{display:none}
}
@media(max-width:650px){.activity-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){
  .page-head,.mail-head{align-items:flex-start;flex-direction:column;padding:24px 0 16px}
  .head-actions{flex-wrap:wrap}
  .overview-grid{gap:8px}
  .stat{padding:12px;min-height:88px}
  .toolbar .search-box{width:100%}
  .message-row{grid-template-columns:8px minmax(90px,36%) minmax(100px,1fr);gap:8px}
  .row-tail{display:none}
  .list-toolbar form{min-width:0}
  .reader{width:100%;height:calc(100dvh - 138px);min-height:560px}
  .reader-top{padding:10px;gap:8px;flex-wrap:wrap}.reader-account{flex-basis:100%;order:3}.reader-scroll{padding:12px 12px 0}.reader-scroll h2{font-size:1.45rem}.reader-replies button,.reader-back{padding:8px 10px;font-size:.76rem}.preview-note{display:none}.reader-actions{padding:8px 0}.reader-addresses summary small{font-size:.7rem}
  .form-grid,.checkbox-list{grid-template-columns:1fr}
  .form-grid .wide{grid-column:span 1}
  .banner.connection div{display:grid;gap:3px}
  .topbar-right{gap:6px}
}
@media(max-width:900px){
  .login-shell{position:relative;isolation:isolate;display:block;min-height:max(100svh,440px);overflow:hidden}
  .login-art{position:absolute;inset:0;display:block;border:0;z-index:0}
  .login-shell::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,18,14,.46),transparent 24%,transparent 48%,rgba(11,18,14,.42) 72%,rgba(11,18,14,.83))}
  .login-panel{position:relative;z-index:1;max-width:none;min-height:max(100svh,440px);width:100%;padding:calc(24px + env(safe-area-inset-top)) clamp(20px,5vw,38px) calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}
  .login-panel .login-brand{align-self:flex-start;gap:10px;margin:0}
  .login-panel .login-brand h1{font-size:2.15rem}
  .login-panel input{font-size:1rem}
  .login-panel form{width:100%;max-width:460px;align-self:center;padding:clamp(22px,5vw,30px);border:1px solid var(--line-strong);border-radius:var(--radius);background:rgba(25,29,21,.9);box-shadow:0 18px 60px rgba(0,0,0,.34);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.sidebar nav .nav-group{font-size:.7rem;color:var(--faint);padding:20px 12px 6px}
@media(max-width:820px){.sidebar nav .nav-group{display:none}}

/* Browser job feedback floats above the message reader so it stays visible after confirming a render. */
.job-toast{position:fixed;z-index:45;right:20px;bottom:20px;width:min(420px,calc(100vw - 32px));display:flex;align-items:flex-start;gap:12px;padding:12px 12px 12px 16px;background:var(--surface-3);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line-strong));border-radius:var(--radius);box-shadow:0 20px 50px #000a;color:var(--accent);font-size:.82rem;animation:banner-in .3s cubic-bezier(.2,.7,.2,1) both}
.job-toast.failed{border-color:color-mix(in srgb,var(--danger) 45%,var(--line-strong));color:var(--danger)}
.job-toast>div{flex:1;min-width:0;overflow-wrap:anywhere}
.job-toast strong{display:block;color:inherit}
.job-toast small{display:block;margin-top:3px;color:var(--text-2);line-height:1.45}
.job-toast .text-button{white-space:nowrap;align-self:center}
.job-toast .action-spinner{margin-top:3px}
@media(max-width:520px){.job-toast{right:16px;left:16px;bottom:16px;width:auto;flex-wrap:wrap}.job-toast .text-button{order:3;width:100%;text-align:left;padding-left:0}}

.skip-link{position:fixed;left:12px;top:-60px;z-index:50;padding:10px 14px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
.workspace:focus{outline:none}
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:12px 0 0}
.stat-tiles div{padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2,var(--surface))}
.stat-tiles dt{color:var(--muted);font-size:.72rem}
.stat-tiles dd{margin:4px 0 0;font-size:1.25rem;font-variant-numeric:tabular-nums}
.stale-worker small{color:var(--warn)}
.rule-dialog{padding-bottom:0}
/* Keep Save reachable while the long automation form scrolls. */
.rule-dialog .dialog-actions{position:sticky;bottom:0;z-index:1;background:var(--surface);padding-bottom:18px;margin-bottom:0}

.menu-toggle{display:none}
@media(max-width:820px){
  .side-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .side-top .brand{order:-1}
  .menu-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-3);color:var(--text);font-weight:600}
  .menu-current{color:var(--muted);font-weight:400;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sidebar nav{display:none}
  .sidebar.menu-open nav{display:grid;grid-template-columns:1fr 1fr;gap:4px;overflow:visible;padding-top:8px}
  .sidebar.menu-open nav .nav-group{display:block;grid-column:1/-1;margin-top:8px}
  .sidebar.menu-open nav .farm-life-link{grid-column:1/-1;border-left:0;border-top:1px solid var(--line-soft);padding-top:10px}
  .sidebar.menu-open .side-bottom{display:flex;padding:12px 6px 0;border-top:1px solid var(--line-soft);margin-top:10px}
}

/* Icon buttons that start background work spin until it is accepted. */
.spin-glyph{display:inline-block}
.icon-button.spinning .spin-glyph{animation:glyph-spin .8s linear infinite}
@keyframes glyph-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.icon-button.spinning .spin-glyph{animation:none}}
.message-meta strong{overflow-wrap:anywhere}

/* Keep the mobile header within narrow viewports behind dialogs as well. */
@media(max-width:400px){.side-top .env-tag,.menu-current{display:none}}

.folder-rail button .folder-name{min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:inherit;color:inherit;line-height:1.4}