/* ===================================================================== */
/*  Operating System tracker — scoped styles (all under .os-app so they  */
/*  never touch the rest of the studio). Ported from roadhouse-os.        */
/* ===================================================================== */
.os-app{
  --bg:#0a0a0a; --panel:#111111; --panel-hi:#161616; --line:#262626;
  --ink:#fff; --ink-dim:#fff; --ink-faint:#fff;
  --gold:#ffffff; --green:#ffffff; --red:#fff; --radius:2px; --w:720px;
  max-width:var(--w); margin:0; padding:4px 0 40px;
  text-align:left; text-transform:uppercase; letter-spacing:.04em;
  line-height:1.55; color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.os-app *{ box-sizing:border-box; margin:0; padding:0; }
.os-app button,.os-app input{ text-transform:uppercase; letter-spacing:inherit; font-family:inherit; }
.os-app button{ cursor:pointer; -webkit-tap-highlight-color:transparent; color:inherit; background:transparent; border:none; }
.os-app em{ font-style:normal; }
.os-app b,.os-app strong{ font-weight:700; }

/* masthead */
.os-app .mast{ margin-bottom:44px; }
.os-app .mast .kicker{ font-size:10px; letter-spacing:.42em; color:var(--ink-faint); margin-bottom:8px; }
.os-app .mast h1{ font-size:30px; font-weight:700; letter-spacing:0; }
.os-app .mast-days{ font-weight:700; font-variant-numeric:tabular-nums; margin-top:10px; line-height:1; }
.os-app .mast-days .n{ display:block; font-size:64px; letter-spacing:-.02em; }
.os-app .mast-days .u{ display:block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px; }

/* objective / filter */
.os-app .creed{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 4px; margin-bottom:46px; }
.os-app .creed p{ font-size:12.5px; color:var(--ink-dim); max-width:48ch; line-height:1.4; }
.os-app .creed .filter{ margin-top:22px; font-size:13px; color:var(--ink); }
.os-app .creed .filter b{ color:var(--ink); font-weight:700; }

/* vision / the run */
.os-app .vision{ margin-bottom:54px; }
.os-app .v-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.os-app .v-kicker{ font-size:10px; letter-spacing:.34em; color:var(--ink); }
.os-app .v-count{ font-size:12px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.14em; }
.os-app .v-sub{ font-size:10px; letter-spacing:.16em; color:var(--ink-faint); margin-top:8px; margin-bottom:20px; }
.os-app .v-intro{ font-size:12.5px; color:var(--ink-dim); margin-bottom:20px; max-width:42ch; }
.os-app .v-group{ margin-bottom:10px; }
.os-app .v-group-label{ font-size:10px; letter-spacing:.2em; color:var(--ink-faint); padding:14px 0 4px; border-top:1px solid var(--line); }
.os-app .v-item{ display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; padding:9px 2px; }
.os-app .v-mark{ flex:0 0 auto; width:10px; height:10px; margin-top:2px; border:1px solid var(--ink); position:relative; transition:border-color .3s ease; }
.os-app .v-item.got .v-mark{ background:var(--ink); border-color:var(--ink); }
.os-app .v-item.got .v-mark::after{ content:none; }
.os-app .v-body{ display:flex; flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:4px 10px; min-width:0; }
.os-app .v-label{ font-size:14.5px; line-height:1.3; font-weight:700; transition:color .3s; }
.os-app #os-the-life .v-label{ font-weight:400; }
.os-app .v-item.got .v-label{ color:var(--ink-dim); }
.os-app .v-note{ font-size:10px; color:var(--ink-faint); margin-top:0; letter-spacing:.1em; line-height:1.35; }
.os-app .v-note::before{ content:"\2B51"; margin-right:8px; }

/* scoreboard */
.os-app .board{ margin-bottom:54px; }
.os-app .board .label{ font-size:10px; letter-spacing:.4em; color:var(--ink-faint); margin-bottom:14px; }
.os-app .board .num{ font-size:96px; font-weight:400; line-height:.9; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.os-app .board .caption{ font-size:12px; letter-spacing:.16em; color:var(--ink-dim); margin-top:12px; }
.os-app .board .predict{ font-size:10px; color:var(--ink-faint); margin-top:20px; letter-spacing:.14em; }

/* date bar */
.os-app .datebar{ display:flex; align-items:center; justify-content:flex-start; gap:18px; margin-bottom:30px; }
.os-app .datebar button{ color:var(--ink-faint); font-size:20px; padding:4px 10px; }
.os-app .datebar button:active{ color:var(--ink); }
.os-app .datebar button:disabled{ opacity:.25; }
.os-app .datebar .d{ font-size:12px; color:var(--ink-dim); }
.os-app .datebar .d .today-tag{ color:var(--ink); font-weight:700; }

/* section */
.os-app .section{ margin-bottom:48px; }
.os-app .section > .head{ display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:6px; }
.os-app .section > .head h2{ font-size:11px; letter-spacing:.32em; color:var(--ink); font-weight:400; }
.os-app .section > .head .meta{ font-size:11px; letter-spacing:.1em; color:var(--ink-faint); }

/* rows */
.os-app .row{ display:flex; align-items:flex-start; gap:14px; padding:11px 2px; border-bottom:1px solid var(--line); }
.os-app .row:last-child{ border-bottom:none; }
.os-app .check{ flex:0 0 auto !important; width:auto !important; height:auto !important; border:none !important; background:transparent; position:relative; margin-top:-1px; padding:0; font-size:19px; line-height:1; color:var(--ink-faint); transition:color .3s ease, transform .12s ease; }
.os-app .check.on{ background:transparent; border:none; color:var(--ink); }
.os-app .check.on::after{ content:none; }
.os-app .check:active{ transform:scale(.85); }

/* image tiles — vision board for The Life + Fuel */
.os-app .os-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; }
@media(min-width:560px){ .os-app .os-tiles{ grid-template-columns:repeat(3,1fr); } }
.os-app .os-tile-img{ aspect-ratio:4/5; background:var(--panel-hi); border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s ease, opacity .15s ease; }
.os-app .os-tile-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.os-app .os-tile-img.ph .os-tile-add{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.38); font-weight:700; }
.os-app .os-tile-img:active{ opacity:.85; }
.os-app .os-tile.on .os-tile-img{ border-color:#fff; }
.os-app .os-tile-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; }
.os-app .os-tile-label{ font-size:12.5px; font-weight:700; line-height:1.25; letter-spacing:.02em; }
.os-app .os-tile.on .os-tile-label{ opacity:.5; }
.os-app .os-tile-foot .check{ margin-top:0 !important; }
.os-app .row .body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
.os-app .row .title{ font-size:14.5px; line-height:1.3; font-weight:700; transition:color .3s; }
.os-app .row.done .title{ color:var(--ink-dim); }
.os-app .row .note{ font-size:10px; color:var(--ink-faint); margin-top:0; letter-spacing:.11em; line-height:1.35; }
.os-app .row .order{ flex:0 0 auto; font-size:10px; color:var(--ink-faint); letter-spacing:.2em; width:20px; }

/* stepper */
.os-app .step{ display:flex; align-items:center; gap:2px; flex:0 0 auto; align-self:center; }
.os-app .step button{ width:30px; height:30px; border:none; color:var(--ink); font-size:18px; transition:opacity .2s; }
.os-app .step button:active{ opacity:.5; }
.os-app .step .val{ min-width:40px; text-align:center; font-size:18px; font-variant-numeric:tabular-nums; color:var(--ink); }
.os-app .step .val.zero{ color:var(--ink-faint); }

/* sleep */
.os-app .sleep{ padding:8px 0 4px; }
.os-app .sleep .hours{ font-size:52px; font-weight:400; font-variant-numeric:tabular-nums; line-height:1; }
.os-app .sleep .hours.good{ color:var(--green); }
.os-app .sleep .hours.bad{ color:var(--red); }
.os-app .sleep .hours.zero{ color:var(--ink-faint); }
.os-app .sleep .verdict{ font-size:11px; letter-spacing:.16em; margin-top:8px; color:var(--ink-dim); }
.os-app .sleep-controls{ display:flex; align-items:center; gap:10px; margin-top:18px; }
.os-app .sleep-controls button{ width:44px; height:40px; border:none; color:var(--ink-dim); font-size:20px; }
.os-app .sleep-controls button:active{ color:var(--ink); }
.os-app .sleep-controls .adjust{ font-size:10px; letter-spacing:.24em; color:var(--ink-faint); }
.os-app .sleep-timer{ margin-top:20px; }
.os-app .sleep-timer button{ min-width:200px; padding:15px 30px; border-radius:var(--radius); font-size:12px; letter-spacing:.22em; transition:background .3s ease,color .3s ease,border-color .3s ease; }
.os-app .sleep-timer .sleepbtn{ background:transparent; color:var(--ink); border:1px solid var(--ink-faint); }
.os-app .sleep-timer .sleepbtn:active{ background:var(--panel-hi); }
.os-app .sleep-timer .wake{ background:var(--ink); color:var(--bg); border:1px solid var(--ink); }
.os-app .sleep-timer .wake:active{ opacity:.85; }

/* progress meter */
.os-app .meter{ margin-top:4px; }
.os-app .meter .track{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.os-app .meter .fill{ height:100%; background:var(--ink); transition:width .5s ease; }
.os-app .meter .fill.floor{ background:var(--red); }
.os-app .meter .fill.mid{ background:var(--gold); }
.os-app .meter .fill.target{ background:var(--green); }
.os-app .meter .legend{ display:flex; justify-content:space-between; font-size:10px; color:var(--ink-faint); margin-top:8px; letter-spacing:.06em; }

/* streak */
.os-app .streak{ display:flex; gap:5px; margin-top:14px; }
.os-app .streak .dot{ flex:1; display:flex; align-items:center; justify-content:flex-start; font-size:10px; font-weight:500; color:var(--ink); position:relative; }
.os-app .streak .dot.today{ font-weight:700; }

/* averages */
.os-app .avg-sleep{ display:flex; padding:20px 0 8px; }
.os-app .avg-sleep .col{ flex:1; border-left:1px solid var(--line); padding:0 4px; }
.os-app .avg-sleep .col:first-child{ border-left:none; }
.os-app .avg-sleep .v{ font-size:26px; font-weight:400; }
.os-app .avg-sleep .k{ font-size:9px; letter-spacing:.24em; color:var(--ink-dim); margin-top:10px; }
.os-app .avg-sleep .n{ font-size:9px; letter-spacing:.14em; color:var(--ink-faint); margin-top:4px; }
.os-app .adherence{ margin-top:8px; }
.os-app .adh-head,.os-app .adh-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 2px; border-bottom:1px solid var(--line); }
.os-app .adh-head .adh-label{ color:var(--ink-faint); }
.os-app .adh-label{ font-size:11px; letter-spacing:.1em; color:var(--ink); }
.os-app .adh-cols{ display:flex; gap:28px; }
.os-app .adh-cols span{ font-size:12px; letter-spacing:.08em; color:var(--ink-dim); min-width:42px; text-align:right; font-variant-numeric:tabular-nums; }
.os-app .adh-head .adh-cols span{ font-size:9px; letter-spacing:.2em; color:var(--ink-faint); }
.os-app .adh-cols span.hi{ color:var(--ink); font-weight:700; }

/* tell */
.os-app .tell{ border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; margin-bottom:48px; background:var(--panel); }
.os-app .tell .t-label{ font-size:10px; letter-spacing:.32em; color:var(--red); margin-bottom:10px; }
.os-app .tell p{ font-size:11px; color:var(--ink-dim); line-height:1.45; letter-spacing:.09em; }
.os-app .tell p b{ color:var(--ink); font-weight:400; }

/* footer */
.os-app .foot{ margin-top:56px; font-size:10px; color:var(--ink-faint); line-height:1.7; }
.os-app .foot .rule{ width:40px; height:1px; background:var(--line); margin:0 auto 20px; }
.os-app .foot em{ color:var(--ink-dim); font-weight:700; }

/* status line (sync) */
.os-app .os-status{ font-size:9px; letter-spacing:.2em; color:var(--ink-faint); margin-bottom:22px; min-height:11px; }

/* --- Nate's directive: no tracking; everything 10px except the name + scoreboard --- */
.os-app,.os-app *{ letter-spacing:0 !important; }
.os-app *:not(h1){ font-size:10px !important; }
.os-app .board .num{ font-size:10px !important; line-height:1.4 !important; margin:2px 0 4px; }

/* --- no grey divider lines; big airy gaps where they were --- */
.os-app .creed{ border:none !important; margin:28px 0 40px; }
.os-app .vision{ margin-bottom:40px; }
.os-app .board{ margin-bottom:40px; }
.os-app .datebar{ margin-bottom:40px; }
.os-app .section{ margin-bottom:40px; }

/* brain-dump notes (write-only) */
#os-root{ padding-top:100px; }
@media(max-width:760px){ #os-root, #os-notes{ padding-top:34px; } .os-app .v-body{ flex-direction:column; gap:2px; } .os-app .v-note::before{ content:none; } }
#os-notes{ padding-top:100px; }
.os-app .section, .os-app .board, .os-app .v-group, .os-app .creed{ scroll-margin-top:24px; }
.os-app .notes-lead{ color:var(--ink-dim); margin-bottom:18px; }
.os-app .os-notes-input{ width:100%; min-height:160px; background:var(--panel-hi); border:none; color:var(--ink); font-family:inherit; font-size:10px !important; text-transform:uppercase !important; letter-spacing:0 !important; line-height:1.8; padding:18px; resize:vertical; outline:none; caret-color:#fff; }
.os-app .os-notes-input::placeholder{ color:var(--ink-faint); text-transform:uppercase; opacity:.5; }
.os-app .os-notes-foot{ display:flex; align-items:center; gap:16px; margin-top:16px; }
.os-app .os-notes-btn{ padding:12px 30px; background:var(--ink); color:var(--bg); border:none; font-size:11px !important; font-weight:700; text-transform:uppercase; cursor:pointer; }
.os-app .os-notes-btn:active{ opacity:.8; }
.os-app .os-notes-status{ font-size:10px; color:var(--ink-faint); }
.os-app .section > .head{ border-bottom:none; padding-bottom:0; margin-bottom:30px; }
.os-app .row{ border-bottom:none !important; }
.os-app .v-group-label{ border-top:none; padding:0 0 12px; font-weight:700; }
.os-app .mast .kicker, .os-app .v-group-label, .os-app .board .label, .os-app .section > .head h2{ font-size:18px !important; font-weight:700 !important; }
.os-app .v-group{ margin-bottom:44px; }
.os-app .adh-head, .os-app .adh-row{ border-bottom:none; }
.os-app .avg-sleep .col{ border-left:none; padding-left:0; }
.os-app .foot .rule{ display:none; }
.os-app .tell{ border:none; padding:0; background:none; margin-bottom:28px; }
.os-app .tell .t-label{ margin-bottom:2px; font-weight:700; }
.os-app .foot{ margin-top:28px; }