/* Design tokens from the hifi handoff. Variables + a few utility classes to
   keep app.js from repeating the same inline strings everywhere (Ponytail). */
:root{
  --page:#FAF9F5; --side:#F0EEE6; --card:#FFFFFF; --well:#F3F0E8;
  --border:#E7E3D8; --hair:#EFEBE0; --input:#D8D2C4;
  --ink:#26231A; --sub:#6E6A5C; --mute:#9C9588; --faint:#B7B1A2;
  --accent:#C15F3C; --accentt:#F5E7E0; --avbg:#F3EDE4;
  --green:#4E7A55; --greent:#E8EFE7; --amber:#9A742A; --ambert:#F4EBD6;
  --red:#A8412B; --redt:#F3E1DB; --blue:#3E6CA8;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#DCD7C9;border-radius:6px;border:2px solid #FAF9F5;}
::-webkit-scrollbar-track{background:transparent;}
@keyframes toastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

button{font-family:inherit;}
input,textarea,select{font-family:inherit;}
.mono{font-family:var(--mono);}
.eyebrow{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);}
.h1{font-size:27px;font-weight:700;letter-spacing:-.02em;margin:6px 0 4px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:20px;font-size:11.5px;font-weight:600;padding:2px 9px;}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.input{width:100%;padding:9px 11px;border:1px solid var(--input);border-radius:9px;background:#fff;font-size:13.5px;color:var(--ink);outline:none;}
.input:focus{border-color:var(--accent);}
.lbl{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);display:block;margin-bottom:5px;}
.rowhover:hover{background:#FBFAF6;}
/* Projects status filter: pill chips on desktop, a single dropdown on phones
   (the pill row was wider than a phone and forced the whole page to scroll
   sideways). The media query below flips which one shows. NOTE: display lives
   in these classes (not inline) so the mobile override can win — an inline
   display:flex would beat a stylesheet display:none. */
.proj-filter-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.proj-filter-drop{display:none;}
/* Projects list layout lives in classes (NOT inline styles) so the blanket
   mobile "stack every inline grid" rule below doesn't hijack it, and so the
   mobile overrides win cleanly without !important. Desktop = table; phone =
   card (see the media query). */
.proj-head{display:grid;grid-template-columns:2.2fr 1fr 1.1fr 1.2fr 1fr;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);}
.proj-row{display:grid;grid-template-columns:2.2fr 1fr 1.1fr 1.2fr 1fr;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid #F3F0E8;padding:13px 16px;cursor:pointer;}
.photoedit{position:relative;cursor:pointer;display:inline-block;align-self:flex-start;}
.photoeditbadge{position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--input);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--sub);}
.photoedit:hover .photoeditbadge{color:var(--accent);border-color:var(--accent);}
.cardhover:hover{border-color:var(--input);}
.btn{cursor:pointer;border-radius:9px;font-size:13px;font-weight:600;padding:8px 14px;border:1px solid transparent;transition:filter .12s;}
.btn:hover{filter:brightness(1.05);}
.btn-clay{background:var(--accent);color:#fff;}
.btn-ghost{background:#fff;border-color:var(--input);color:var(--ink);}
.seg{display:inline-flex;background:var(--well);border-radius:9px;padding:3px;gap:2px;}
.seg button{cursor:pointer;border:none;background:transparent;border-radius:7px;padding:6px 12px;font-size:12.5px;}

/* --- Mobile layout + collapsible left navigation --- */
.navtoggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;border:1px solid var(--input);background:#fff;color:var(--ink);cursor:pointer;flex-shrink:0;font-size:16px;line-height:1;}
.navscrim{display:none;}
@media (max-width: 820px){
  /* left nav becomes an off-canvas drawer, collapsed by default */
  .sidebar{position:fixed !important;top:0;left:0;height:100vh !important;z-index:50;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 44px rgba(40,35,20,.22);}
  .sidebar.open{transform:translateX(0);}
  .navtoggle{display:inline-flex;}
  .navscrim{display:block;position:fixed;inset:0;background:rgba(40,35,20,.38);z-index:45;}
  .topbar{padding:0 12px !important;gap:10px;}
  .appcontent{padding:16px 13px 46px !important;}
  /* the app leans on inline multi-column grids everywhere — stack them on phones */
  .appcontent [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  .hide-mobile{display:none !important;}
  /* Projects list: instead of the blanket single-column stack (which sprawls the
     5 table cells vertically), lay each project out as a readable card — the
     name/repo block full-width on top, then status·agent and sync·progress as a
     tidy 2-up meta grid. (Brad, mobile readability.) */
  /* Projects list: card layout on phones — name/repo block full-width on top,
     then status·agent and sync·progress as a tidy 2-up meta grid, and each
     project as its OWN spaced card (Brad: a little space between cards). */
  .proj-list{background:none !important;border:none !important;border-radius:0 !important;overflow:visible !important;}
  .proj-head{display:none;}
  .proj-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px 14px;align-items:start;padding:14px 15px;
            background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:11px;box-shadow:0 1px 2px rgba(40,35,20,.04);}
  .proj-row>*{min-width:0;}                               /* tracks shrink instead of overflowing */
  .proj-row>:first-child{grid-column:1 / -1;}             /* name/repo block spans full width */
  /* filter: hide the pill chips, show the dropdown (no more sideways scroll) */
  .proj-filter-chips{display:none;}
  .proj-filter-drop{display:block;flex:1;min-width:0;max-width:100%;}
  .proj-filterbar{flex-wrap:nowrap;}
}