/* ==========================================================================
   Supp Farm — styles
   Palette (light, warmed): bg #EFE3B6, surface #FAF3D9, surface-2 #E6D9A8; accents #A4BE7B #5F8D4E #285430
   Palette (dark, deepened): bg #141B13, surface #1D281B, surface-2 #263423; accents #739B61 #A4BE7B; text #D9D0B5
   Sections: 1 tokens · 2 base · 3 header & theme switch · 4 controls ·
             5 cards · 6 plants · 7 completion overlay · 8 admin ·
             9 dialogs · 10 drag & drop · 11 responsive & motion
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */
:root{
  color-scheme:light;
  --bg:#EFE3B6; --surface:#FAF3D9; --surface-2:#E6D9A8;
  --ink:#285430; --muted:#4f6a49; --line:#d3c58f;
  --accent:#5F8D4E; --accent-strong:#285430; --accent-soft:color-mix(in srgb,#A4BE7B 38%,transparent);
  --on-accent:#F4ECD6;
  --amber:#7d5c1f; --amber-soft:#eddfae; --red:#9d342d; --red-soft:#f3d8cf;
  --green:#285430; --green-soft:color-mix(in srgb,#A4BE7B 45%,transparent);
  --shadow:0 8px 26px rgba(40,84,48,.10); --radius:16px; --focus:#285430;
  /* plant artwork */
  --pot:#c86f43; --pot-rim:#a84f2d; --soil:#5a3d27; --seed:#8d6b3f; --seed-hi:#b99763;
  --stem:#5F8D4E; --leaf:#5F8D4E; --leaf-2:#A4BE7B; --petal:#e89aaa; --petal-2:#f2b8c3; --bloom:#f3cf62;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#141B13; --surface:#1D281B; --surface-2:#263423;
  --ink:#D9D0B5; --muted:#aab795; --line:#33442f;
  --accent:#739B61; --accent-strong:#A4BE7B; --accent-soft:rgba(115,155,97,.28);
  --on-accent:#20291F;
  --amber:#e0c079; --amber-soft:rgba(224,192,121,.16); --red:#f29a8e; --red-soft:rgba(242,154,142,.15);
  --green:#A4BE7B; --green-soft:rgba(115,155,97,.30);
  --shadow:0 8px 26px rgba(0,0,0,.25); --focus:#A4BE7B;
  --pot:#b96b48; --pot-rim:#8d4d34; --soil:#3a281b; --seed:#b4925f; --seed-hi:#d8bc8a;
  --stem:#A4BE7B; --leaf:#739B61; --leaf-2:#A4BE7B; --petal:#e48fa1; --petal-2:#f0aebb; --bloom:#efcb64;
}

/* 2 · Base --------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;transition:background .25s,color .25s}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hidden{display:none!important}
.skip-link{position:absolute;left:-999px;top:8px;z-index:200;background:var(--accent-strong);color:var(--on-accent);padding:8px 12px;border-radius:8px}
.skip-link:focus{left:8px}
.app{max-width:1220px;margin:auto;padding:24px 24px 64px}
kbd{font:inherit;font-weight:700;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 6px;background:var(--surface-2)}
input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 10px;min-width:0}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
select{max-width:100%}

/* 3 · Header, brand, theme switch --------------------------------------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;border-radius:14px;padding:4px 8px 4px 4px;margin:-4px}
.brand:hover .brand-name{color:var(--accent)}
.brand-mark{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:block;box-shadow:0 5px 14px rgba(40,84,48,.22)}
.brand-name{display:block;font-size:21px;font-weight:800;letter-spacing:-.5px;line-height:1.2;transition:color .2s}
.brand-tag{display:block;color:var(--muted);font-size:12px}
.top-actions{display:flex;gap:8px;align-items:center}

.theme-switch{--w:58px;--h:30px;position:relative;width:var(--w);height:var(--h);flex:0 0 auto;border:0;padding:0;border-radius:999px;background:#A4BE7B;overflow:hidden;box-shadow:inset 0 2px 5px rgba(40,84,48,.35),0 0 0 1px rgba(40,84,48,.25);transition:background .45s}
.theme-switch .ts-sky{position:absolute;inset:0;transition:transform .45s ease}
.theme-switch .ts-cloud{position:absolute;right:7px;bottom:5px;width:20px;height:7px;border-radius:99px;background:#F4ECD6;box-shadow:-7px -4px 0 -1px #F4ECD6,-13px 1px 0 -2px #F4ECD6;opacity:.95;transition:transform .45s,opacity .3s}
.theme-switch .ts-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#D9D0B5;opacity:0;transition:opacity .35s}
.theme-switch .ts-star:nth-child(1){left:10px;top:8px}.theme-switch .ts-star:nth-child(2){left:19px;top:17px;width:2px;height:2px}.theme-switch .ts-star:nth-child(3){left:25px;top:7px;width:2px;height:2px}
.theme-switch .ts-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#F3CF62;box-shadow:0 0 0 3px rgba(243,207,98,.35),0 2px 4px rgba(0,0,0,.25);transition:transform .45s cubic-bezier(.5,0,.2,1.2),background .35s,box-shadow .35s;overflow:hidden}
.theme-switch .ts-crater{position:absolute;border-radius:50%;background:#bfb48a;opacity:0;transition:opacity .3s}
.theme-switch .ts-crater:nth-child(1){width:7px;height:7px;left:12px;top:4px}.theme-switch .ts-crater:nth-child(2){width:5px;height:5px;left:5px;top:12px}.theme-switch .ts-crater:nth-child(3){width:3px;height:3px;left:14px;top:15px}
.theme-switch[aria-checked="true"]{background:#101610;box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 0 0 1px #33442f}
.theme-switch[aria-checked="true"] .ts-knob{transform:translateX(28px);background:#D9D0B5;box-shadow:0 0 0 3px rgba(217,208,181,.18),0 2px 4px rgba(0,0,0,.4)}
.theme-switch[aria-checked="true"] .ts-crater{opacity:.75}
.theme-switch[aria-checked="true"] .ts-star{opacity:.95}
.theme-switch[aria-checked="true"] .ts-cloud{transform:translateY(16px);opacity:0}

/* 4 · Buttons, stats, toolbar, filters ---------------------------------- */
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:9px 13px;font-weight:650;font-size:13px;display:inline-flex;gap:7px;align-items:center;justify-content:center;transition:background .2s,transform .15s,border-color .2s,filter .2s}
.btn:hover:not(:disabled){background:var(--surface-2)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent)}
.btn.primary:hover:not(:disabled){filter:brightness(1.12);background:var(--accent-strong)}
.btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.btn.danger.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.btn.small{padding:6px 9px;font-size:12px}
.btn.icon{padding:7px;width:32px;height:32px}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.page-title{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px}
.eyebrow{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:800}
.page-title h1,.admin-header h1{font-size:30px;letter-spacing:-1px;margin:3px 0 5px;line-height:1.2}
.page-title p{margin:0;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.stat-label{font-size:12px;color:var(--muted);font-weight:650}.stat-num{font-size:27px;letter-spacing:-.8px;font-weight:750;margin-top:2px}.stat-sub{font-size:11px;color:var(--muted)}
.toolbar{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.search{flex:1;min-width:180px;position:relative}.search input{width:100%;padding-left:34px}.search span{position:absolute;left:12px;top:8px;color:var(--muted);pointer-events:none}
.toolbar select{max-width:230px}
.hint{font-size:12px;color:var(--muted)}
.section-heading{display:flex;justify-content:space-between;align-items:center;margin:20px 2px 10px}.section-heading h2,.section-heading h3{font-size:15px;margin:0}.count{font-size:12px;color:var(--muted)}
.multi-filter{position:relative;min-width:150px;max-width:240px;flex:0 1 210px}
.multi-filter-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;min-height:40px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--surface);font-size:13px;font-weight:600}
.multi-filter-trigger:hover{border-color:var(--accent)}
.multi-filter-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.multi-filter-menu{position:absolute;z-index:15;top:calc(100% + 7px);left:0;right:0;min-width:220px;max-height:300px;overflow-y:auto;padding:7px;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 40px rgba(0,0,0,.2)}
.multi-filter-option{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:8px;font-size:13px;cursor:pointer}
.multi-filter-option:hover{background:var(--surface-2)}
.multi-filter-option input{accent-color:var(--accent);min-width:auto;margin:0}

/* 5 · Cards & groups ----------------------------------------------------- */
.supp-card,.college-group,.admin-panel,.empty-state{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.supp-card{margin-bottom:11px;overflow:hidden;transition:border-color .3s,box-shadow .3s,background .25s}
.card-head{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 10px;min-height:82px;cursor:pointer}
.card-head:hover{background:color-mix(in srgb,var(--surface-2) 40%,transparent)}
.card-main{flex:1;min-width:0}
.card-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-title{font-weight:750;font-size:15px;letter-spacing:-.15px;overflow-wrap:anywhere;cursor:text}
.card-sub{font-size:12px;color:var(--muted);margin-top:4px;display:flex;gap:9px;flex-wrap:wrap}
.card-actions{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.chevron svg{transition:transform .2s}.chevron[aria-expanded="true"] svg{transform:rotate(180deg)}
.status{font-size:11px;font-weight:750;padding:4px 8px;border-radius:999px;white-space:nowrap}
.status.not-started{background:var(--surface-2);color:var(--muted)}
.status.in-progress{background:var(--amber-soft);color:var(--amber)}
.status.complete{background:var(--green-soft);color:var(--green)}
.supp-card.just-completed{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow)}
.editor{border-top:1px solid var(--line);padding:17px;background:var(--surface)}
.prompt-box{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:13px 14px;margin-bottom:14px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
.prompt-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;font-weight:800;color:var(--muted);margin-bottom:5px}
.draft-label-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px}.draft-label-row label{font-weight:750;font-size:13px}
.draft{width:100%;min-height:210px;resize:vertical;line-height:1.65;padding:13px 14px;border-radius:11px;display:block}
.editor-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap}
.editor-foot-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.wordcount{font-size:12px;font-weight:750;color:var(--muted);white-space:nowrap}
.wordcount.near{color:var(--amber)}.wordcount.over{color:var(--red)}
.save-state{font-size:11px;color:var(--green)}
.college-group{margin-bottom:14px;overflow:hidden}
.college-head{display:flex;align-items:center;gap:10px;padding:12px 17px 12px 10px;background:var(--surface-2);cursor:pointer;user-select:none}
.college-head h2{margin:0;font-size:15px}.college-head .group-meta{color:var(--muted);font-size:12px}.college-head .push{margin-left:auto;font-size:12px;color:var(--muted)}
.group-toggle{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:4px 6px;border-radius:8px;font:inherit;font-weight:750;font-size:15px;text-align:left;color:inherit}
.group-toggle .caret{width:14px;text-align:center;transition:transform .2s}
.group-toggle[aria-expanded="true"] .caret{transform:rotate(90deg)}
.college-items{padding:10px 12px 2px}.college-items .supp-card{box-shadow:none}
.empty-state{text-align:center;padding:48px 20px}.empty-icon{font-size:29px;margin-bottom:9px;color:var(--accent)}.empty-state h2{margin:0 0 5px;font-size:18px}.empty-state p{max-width:460px;margin:0 auto 17px;color:var(--muted)}
.footer-note{text-align:center;color:var(--muted);font-size:11px;margin-top:30px}

/* 6 · Plant artwork ------------------------------------------------------ */
.plant-wrap{flex:0 0 46px;width:46px;height:58px;display:block}
.plant-wrap.is-hidden{visibility:hidden}
.plant{display:block;width:100%;height:100%;overflow:visible}
.plant .p-seed,.plant .p-pot{transition:opacity .25s}
.plant .p-grow{transition:transform .55s cubic-bezier(.34,1.3,.64,1),opacity .3s}
.plant .p-stem{transform-origin:32px 55px}
.plant .p-leaf-lo{transform-origin:32px 46px}
.plant .p-leaf-up{transform-origin:32px 36px}
.plant .p-flower{transform-origin:32px 22px}
/* not started: only the seed */
.plant[data-state="not-started"] .p-pot,.plant[data-state="not-started"] .p-grow{opacity:0}
.plant:not([data-state="not-started"]) .p-seed{opacity:0}
/* in progress (and not-started, so seed→pot only fades in and never flashes full size): ungrown sprout */
.plant:not([data-state="complete"]) .p-stem{transform:scaleY(.2)}
.plant:not([data-state="complete"]) .p-leaf-lo{transform:scale(.3)}
.plant:not([data-state="complete"]) .p-leaf-up,.plant:not([data-state="complete"]) .p-flower{transform:scale(0)}
/* complete: fully grown (default transforms) */
.plant.is-anim .p-grow,.plant.is-anim .p-seed,.plant.is-anim .p-pot{transition:none}
@keyframes plant-pop{0%{transform:scale(.82)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.plant-wrap.pop .plant{animation:plant-pop .38s ease-out;transform-origin:50% 100%}

/* 7 · Completion overlay ------------------------------------------------- */
.completion-overlay{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at center,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--bg) 55%,transparent) 70%)}
.completion-overlay.active{opacity:1}
.completion-plant{position:fixed;left:0;top:0;z-index:101;pointer-events:none;transform-origin:0 0;will-change:transform;filter:drop-shadow(0 12px 14px rgba(40,84,48,.28))}
.completion-skip{position:fixed;right:18px;bottom:16px;z-index:102;font-size:12px;color:var(--ink);background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.18);border-radius:999px;padding:6px 12px;opacity:0;pointer-events:none;transition:opacity .25s}
.completion-skip.visible{opacity:.92}
.toast{position:fixed;left:20px;bottom:20px;background:var(--accent-strong);color:var(--on-accent);border-radius:11px;padding:12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:250;max-width:360px;font-size:13px}

/* 8 · Admin & settings --------------------------------------------------- */
.admin-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}
.admin-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:17px}
.tab{padding:10px 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:700}
.tab.active{color:var(--accent-strong);border-bottom-color:var(--accent)}
.admin-panel{padding:18px;margin-bottom:14px;box-shadow:none}
.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.panel-title h2{font-size:15px;margin:0}
.admin-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:9px 12px 9px 6px;margin-bottom:8px;background:var(--surface)}
.row-info{flex:1;min-width:0}.row-info strong{display:block;overflow-wrap:anywhere}.row-info small{display:block;color:var(--muted);margin-top:2px}
.row-actions{display:flex;gap:5px;flex-wrap:wrap}
.order-list{min-height:24px}
.sort-order-note{background:var(--accent-soft);padding:10px 12px;border-radius:9px;font-size:12px;margin-bottom:12px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.settings-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--surface)}.settings-card h2{margin:0 0 5px;font-size:14px}.settings-card p{margin:0 0 13px;font-size:12px;color:var(--muted)}
.settings-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.settings-note{font-size:12px;color:var(--muted);margin-top:12px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;font-weight:750}.field.full{grid-column:1/-1}.field textarea{min-height:120px;resize:vertical}.field .help{font-size:11px;color:var(--muted)}
.checkline{display:flex;align-items:center;gap:8px;font-size:13px}.checkline input{min-width:auto;accent-color:var(--accent)}

/* 9 · Dialogs ------------------------------------------------------------ */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,22,14,.55);display:grid;place-items:center;padding:20px;z-index:200}
.modal{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;width:min(480px,100%);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:hidden}
.modal-head{padding:22px 24px 6px;flex:0 0 auto}.modal-head h2{margin:0;font-size:19px}
.modal-body{padding:10px 24px 8px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal-body>p{color:var(--muted);margin:0 0 8px;font-size:14px}
.modal-actions{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 24px 18px;border-top:1px solid var(--line);background:var(--surface)}
.modal-actions .btn{min-height:40px}
.radio-stack{display:grid;gap:9px;margin:15px 0}
.radio-option{border:1px solid var(--line);border-radius:10px;padding:11px;display:flex;gap:9px;align-items:flex-start;cursor:pointer}
.radio-option input{margin-top:4px;min-width:auto;accent-color:var(--accent)}
.radio-option strong{display:block;font-size:13px}.radio-option small{display:block;color:var(--muted);font-size:12px}

/* 10 · Drag & drop ------------------------------------------------------- */
.grip{flex:0 0 auto;width:26px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);border-radius:8px;cursor:grab;touch-action:none;opacity:.75}
.grip:hover{background:var(--surface-2);opacity:1}.grip:active{cursor:grabbing}
.grip svg{width:14px;height:18px}
.grip-spacer{flex:0 0 6px}
.is-dragging{opacity:.55;box-shadow:0 14px 34px rgba(0,0,0,.22)!important;border-color:var(--accent)!important}
body.drag-active{cursor:grabbing}
.drag-hint{font-size:12px;color:var(--muted)}

/* 11 · Responsive & motion ---------------------------------------------- */
@media(max-width:720px){
  .app{padding:16px 12px 40px}.topbar{align-items:flex-start;gap:10px}.brand-name{font-size:18px}.brand-tag{display:none}.brand-mark{width:36px;height:36px}
  .top-actions{gap:5px;flex-wrap:wrap;justify-content:flex-end}.top-actions .btn{padding:8px 9px}
  .page-title{align-items:flex-start;flex-direction:column}.page-title h1,.admin-header h1{font-size:25px}
  .stats{gap:7px}.stat{padding:12px}.stat-num{font-size:23px}.stat-label{font-size:11px}
  .toolbar select{flex:1;max-width:none}.multi-filter{min-width:calc(50% - 6px);max-width:none;flex:1}
  .form-grid,.settings-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
  .card-head{padding:12px 8px;gap:8px}.card-title{font-size:14px}.editor{padding:12px}.draft-label-row{align-items:flex-start}
  .card-actions .btn.icon{width:30px;height:30px}
  .admin-row{align-items:flex-start;gap:7px}.row-actions{flex-direction:column}.admin-header{align-items:flex-start}
  .modal-backdrop{padding:10px}.modal{max-height:calc(100dvh - 20px)}.modal-head{padding:18px 18px 4px}.modal-body{padding:8px 18px}.modal-actions{padding:12px 18px 16px;gap:8px}.modal-actions .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}