/* "Studio" look (Settings → Look): a quieter, more architectural style. Serif headings that echo the Ellington
   wordmark, a grotesk for everything else, hairline rules instead of shadows and bubbles, square-ish corners, no
   emoji in the interface, one deep brown for actions. Only applies when <html> has the class "studio". */
html.studio{
  --bg:#F5F3EE; --surface:#FFFFFF; --surface-2:#F0EDE6; --ink:#1E1C18; --muted:#6A6458; --line:#E3DED3;
  --accent:#4A4130; --accent-soft:#EDE9E0; --accent-2:#8C7F5E; --on-accent:#FFFFFF;
  --good:#566B4C; --good-soft:#E7EBE0; --warn:#8F6B2E; --warn-soft:#F3EBDA; --crit:#924A38; --crit-soft:#F2E3DD; --info:#55626F; --info-soft:#E9ECEF;
  --shadow:none; --shadow-lift:0 12px 32px rgba(30,28,24,.10);
  --display:"Instrument Serif",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Instrument Sans",system-ui,sans-serif;
}
html.studio body{font-size:14.5px;letter-spacing:-.003em;-webkit-font-smoothing:antialiased}
/* Type: serif only for big titles; numbers line up */
html.studio h1,html.studio .pagetitle,html.studio .jobhead h1,html.studio .yirtitle{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
html.studio .pagetitle{font-size:36px;line-height:1.05}
html.studio .jobhead h1{font-size:46px;line-height:1}
html.studio h2,html.studio h3{font-family:var(--body);font-weight:600;letter-spacing:-.005em}
html.studio .mono,html.studio .num,html.studio .stat .v{font-family:var(--body);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
html.studio .eyebrow,html.studio .tbl th,html.studio .navlabel{letter-spacing:.04em;font-size:11px;font-weight:500;color:var(--muted)}
/* Surfaces: hairlines, no shadows, smaller radii */
html.studio .panel,html.studio .stat,html.studio .moneystrip,html.studio .hmhero,html.studio .igcard,html.studio .ccrow,html.studio .rptile,html.studio .pcard{box-shadow:none;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
html.studio .hmhero{background:var(--surface) !important}
html.studio .hmhero::before,html.studio .hmhero::after{display:none !important}
html.studio .stats{gap:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
html.studio .stats .stat{border:0;border-radius:0;border-right:1px solid var(--line);background:none;padding:14px 18px}
html.studio .stats .stat:last-child{border-right:0}
html.studio .stat .v{font-weight:500;font-size:30px}
/* Buttons: one solid brown for the action, outlined for the rest, all one height */
html.studio .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 14px;border-radius:6px;font-weight:500;font-size:14px;box-shadow:none;letter-spacing:0;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
html.studio .btn:hover:not(:disabled){filter:none;background:#3A3326}
html.studio .btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
html.studio .btn.ghost:hover:not(:disabled){background:var(--surface-2)}
html.studio .btn.small{min-height:28px;padding:3px 10px;font-size:13px}
html.studio .btn.big,html.studio .btn.big2{min-height:46px;border-radius:6px;font-family:var(--body);font-size:16px}
html.studio .camerabtn{background:var(--surface);color:var(--ink);border-color:var(--line)}
html.studio .camerabtn svg{stroke:var(--accent)}
html.studio .linkbtn{text-underline-offset:3px;text-decoration-thickness:1px}
/* Inputs */
html.studio .field input,html.studio .field select,html.studio .field textarea,html.studio .sel,html.studio input[type=search]{border-radius:6px;border:1px solid var(--line);background:var(--surface);box-shadow:none}
html.studio .field input:focus,html.studio .field select:focus,html.studio .field textarea:focus,html.studio .sel:focus{outline:2px solid color-mix(in srgb,var(--accent) 25%,transparent);outline-offset:0;border-color:var(--accent-2)}
/* Chips and flags: small, quiet labels with a status dot */
html.studio .chip,html.studio .flag{border-radius:4px;font-weight:500;font-size:12px;padding:2px 8px;letter-spacing:0}
html.studio .chip{background:var(--surface-2);color:var(--ink)}
/* Side menu: plain list, a thin brown bar marks the page you're on */
html.studio .side{background:var(--bg);border-right:1px solid var(--line)}
html.studio .sidenav a{border-radius:0;padding:8px 12px 8px 14px;font-weight:500;font-size:14px;color:var(--muted);position:relative}
html.studio .sidenav a svg{width:17px;height:17px;stroke-width:1.5}
html.studio .sidenav a:hover{background:none;color:var(--ink)}
html.studio .sidenav a[aria-current="page"]{background:none;color:var(--ink)}
html.studio .sidenav a[aria-current="page"]::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--accent)}
/* Home alerts: one line each, a small colored mark instead of an emoji */
html.studio .hmalert{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:9px 12px 9px 14px;position:relative}
html.studio .hmalert>span[aria-hidden="true"]:first-child,html.studio .cmdicon,html.studio .bellic,html.studio .igcount{display:none}
html.studio .hmalert::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--info)}
html.studio .hmalert.late::before,html.studio .hmalert.crit::before{background:var(--crit)}
/* Job page: section buttons become a quiet segmented bar; tabs become underlined text */
html.studio .jobnavtabs{border-bottom:1px solid var(--line)}
html.studio .tabgroups{gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
html.studio .tgbtn{border:0;border-right:1px solid var(--line);border-radius:0;min-height:42px;font-weight:500;background:none}
html.studio .tgbtn:last-child{border-right:0}
html.studio .tgbtn svg{stroke-width:1.5}
html.studio .tgbtn[aria-current="true"]{background:var(--accent);color:#fff}
html.studio .tgbtn[aria-current="true"] svg{stroke:#fff}
html.studio .subpills{gap:18px}
html.studio .subpills button{border:0;border-radius:0;background:none;padding:6px 0;min-height:32px;color:var(--muted);border-bottom:2px solid transparent}
html.studio .subpills button:hover{background:none;color:var(--ink)}
html.studio .subpills button[aria-selected="true"]{background:none;color:var(--ink);border-bottom-color:var(--accent)}
html.studio .subpills button[aria-selected="true"] .count{background:var(--surface-2);color:var(--ink)}
html.studio .moneystrip b{font-weight:500;font-size:19px}
html.studio .moneystrip .msbar i,html.studio .pftrack i{background:var(--accent-2)}
/* Lists and tables: hairline rows, generous spacing */
html.studio .tbl td{padding:10px 10px}
html.studio .tbl th{padding:8px 10px}
html.studio .jlist>li{border-radius:0}
html.studio .bellbtn{border-radius:6px;box-shadow:none}
html.studio .bellbadge,html.studio .count.warn{background:var(--crit)}
@media (max-width:900px){
  html.studio .pagetitle{font-size:30px}
  html.studio .jobhead h1{font-size:36px}
  html.studio .stats{grid-template-columns:1fr 1fr}
  html.studio .stats .stat:nth-child(2n){border-right:0}
  html.studio .stats .stat{border-bottom:1px solid var(--line)}
  html.studio .tabgroups{border-radius:8px}
  html.studio .tgbtn{border-bottom:1px solid var(--line)}
}
/* ---------- Studio cleanup ---------- */
/* One spacing scale: 8 / 16 / 24 / 32 */
html.studio .stack{gap:24px}
html.studio .cols2{gap:32px}
html.studio .block{margin:0}
html.studio .block>h3{margin-bottom:8px}
html.studio .panel>h2{margin:0}
html.studio .panel>.note{margin:0}
html.studio .pagetitle~.panel{margin-bottom:16px}
html.studio .panel{padding:20px 24px;gap:16px}
html.studio .settings{gap:16px}
html.studio .setgroup{margin:0 0 16px}
html.studio .stats,html.studio .moneystrip{margin:16px 0 24px}
html.studio .jobhead{margin-bottom:16px}
html.studio .headlinks{gap:8px}
html.studio .coacts{gap:8px}
/* Fewer choices at once: Settings groups and rarely used job sections fold closed */
html.studio .setgroup>.setgh{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line);margin:0;font-size:18px;font-weight:500}
html.studio .setgroup>.setgh::after,html.studio .foldable>h3::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin:0 6px 4px 12px;transition:transform .15s}
html.studio .setgroup.open>.setgh::after,html.studio .foldable.open>h3::after{transform:rotate(-135deg);margin-bottom:-2px}
html.studio .setgroup:not(.open)>.settings{display:none}
html.studio .foldable>h3{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
html.studio .foldable:not(.open)>:not(h3){display:none}
/* Empty screens: a calm framed note instead of a stray line */
html.studio .empty,html.studio .bellempty{display:flex;align-items:center;justify-content:center;text-align:center;min-height:96px;padding:24px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:14px;background:transparent}
/* Loading: soft placeholder bars instead of "Loading…" */
html.studio .skel{position:relative;color:transparent !important;min-height:14px;border-radius:4px;overflow:hidden;background:var(--surface-2);max-width:420px;user-select:none}
html.studio .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%);animation:skel 1.3s ease-in-out infinite}
html.studio h1.skel,html.studio .pagetitle+.skel{min-height:18px}
@keyframes skel{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){ html.studio .skel::after{animation:none} }
/* One icon style: line icons only, no colored emoji tiles */
html.studio .tgdot,html.studio .belldot{background:var(--warn)}
html.studio .clnum{background:var(--accent);border-radius:3px}
html.studio .toast{border-radius:6px;box-shadow:var(--shadow-lift)}
/* Studio home: serif hello, verse as a quiet pull quote */
html.studio .hmwarm .hmhello h2{font-family:var(--display);font-weight:400;font-size:44px;line-height:1.02;letter-spacing:-.01em}
html.studio .hmnote{font-size:16.5px}
html.studio .hmverse{border-left:1px solid var(--line);padding-left:24px}
html.studio .hmverse blockquote{font-family:var(--display);font-size:22px;line-height:1.35}
html.studio .hmpic{border-radius:6px}
html.studio .hmglance .hmchip{border-radius:4px}