/* MKOS app — Ink & Bone on deep blue (design handoff 2026-10-27). Closed palette: no sage, taupe, orange or brown. */
:root {
  --bg: radial-gradient(120% 90% at 20% 0%, #123A7A 0%, #0A1A36 55%, #060C18 100%);
  --bone: #EDE8DF; --ink: #0A0A0A;
  --glass: rgba(255,255,255,.07); --well: rgba(10,10,10,.28);
  --line: rgba(237,232,223,.22); --line-soft: rgba(237,232,223,.12); --line-hard: rgba(237,232,223,.5);
  --track: #14213A; --blue: #3D8BFF; --blue-text: #7AB8FF;
  --red: #FF4D5E; --red-text: #FF8A95;   /* issues only: something is wrong and needs a person (owner, 2026-10-27) */
  --muted: rgba(237,232,223,.62); --faint: rgba(237,232,223,.4);
  --r-panel: 30px; --r-card: 22px; --r-inner: 16px; --r-pill: 999px; --blur: 18px;
  --rail: 92px; --side: 380px; --row: 88px; --gap: 16px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; min-height: 100dvh; background: #060C18 var(--bg) fixed; color: var(--bone); font: 400 15px/1.45 Barlow, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue-text); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; }
.display { font-family: Archivo, Barlow, sans-serif; font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125; letter-spacing: .01em; text-transform: uppercase; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 13px; } .tiny { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.row { display: flex; align-items: center; gap: 10px; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* surfaces */
.glass { background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--r-card); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
.well { background: var(--well); border: 1px solid var(--line-soft); border-radius: var(--r-inner); }
.dark { background: rgba(10,10,10,.55); border: 1px solid var(--line-hard); border-radius: var(--r-card); }

/* controls */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 13.5px; white-space: nowrap; }
.chip.on { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.chip:hover:not(.on) { border-color: var(--line-hard); }
.ibtn { width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--glass); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ibtn.sm { width: 32px; height: 32px; }
.lbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; cursor: pointer; font-weight: 500; }
.lbtn.primary { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.lbtn.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.lbtn:disabled { opacity: .45; cursor: default; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--well); border: 1px solid var(--line-soft); }
.seg button { height: 26px; padding: 0 11px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer; font-size: 12.5px; color: var(--muted); }
.seg button.on { background: var(--bone); color: var(--ink); }
input.field, textarea.field, select.field { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-inner); border: 1px solid var(--line); background: var(--well); outline: none; }
input.field:focus, textarea.field:focus { border-color: var(--blue); }
select.field { appearance: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; border: 1px solid var(--line); white-space: nowrap; }
.pill.urgent { background: var(--red); color: var(--ink); border-color: var(--red); }
.pill.check { border-color: var(--blue); color: var(--blue-text); }
.pill.info { color: var(--muted); }
.pill.ok { border-style: solid; color: var(--bone); }
.dot { width: 10px; height: 10px; border-radius: var(--r-pill); flex: none; display: inline-block; }
.dot.done { background: var(--bone); } .dot.now { background: var(--blue); box-shadow: 0 0 0 4px rgba(61,139,255,.2); }
.dot.todo { border: 1.5px solid var(--line-hard); } .dot.unk { border: 1.5px dashed var(--faint); } .dot.bad { background: var(--red); box-shadow: 0 0 0 3px rgba(255,77,94,.35); }
.tracker { display: flex; align-items: center; gap: 0; }
.tracker .seg-line { width: 14px; height: 2px; background: var(--track); }
.tracker .seg-line.done { background: var(--line-hard); }
.ai-note { border-left: 2px solid var(--blue); padding: 10px 14px; background: rgba(61,139,255,.08); border-radius: 0 var(--r-inner) var(--r-inner) 0; font-size: 14px; }
.check-row { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-hard); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.box.on { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--bone); }
.bar.blue > i { background: var(--blue); }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(8,20,42,.92); }
table.t td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover td { background: rgba(255,255,255,.03); }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* shell */
.app { min-height: 100dvh; display: grid; grid-template-columns: var(--rail) 1fr; grid-template-rows: 72px 1fr; }
header.top { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 0 22px; border-bottom: 1px solid var(--line-soft); }
header.top .logo { height: 22px; }
nav.rail { padding: 18px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; border-right: 1px solid var(--line-soft); }
nav.rail a { width: 72px; padding: 10px 0 8px; border-radius: var(--r-inner); display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 11.5px; }
nav.rail a.on { background: var(--glass); color: var(--bone); outline: 1px solid var(--line-soft); }
nav.rail a:hover { color: var(--bone); }
main { padding: 22px 26px 60px; min-width: 0; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 30px; line-height: 1; }
.views { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.banner { padding: 10px 16px; border-radius: var(--r-inner); border: 1px dashed var(--line); margin-bottom: 16px; font-size: 14px; color: var(--muted); }
.tabbar { display: none; }

/* widget grid */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--row); gap: var(--gap); position: relative; }
.widget { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.widget > .wh { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
.widget > .wh h3 { font-size: 15px; font-weight: 500; }
.widget > .wb { flex: 1; min-height: 0; overflow: auto; padding: 4px 16px 16px; }
.widget .grip, .widget .rm, .widget .resize, .widget .mv { display: none; }
.editing .widget { outline: 1.5px dashed var(--line); }
.editing .widget .grip { display: inline-flex; cursor: grab; color: var(--muted); touch-action: none; }
.editing .widget .rm { display: inline-flex; }
.editing .widget .resize { display: block; position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; border-right: 2px solid var(--line-hard); border-bottom: 2px solid var(--line-hard); border-radius: 0 0 10px 0; }
.widget.dragging { opacity: .85; z-index: 5; box-shadow: 0 20px 60px rgba(0,0,0,.5); outline-color: var(--blue); }
.ghost { border: 2px dashed var(--blue); border-radius: var(--r-card); background: rgba(61,139,255,.08); pointer-events: none; }
.add-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 16px; }
.add-tray button { text-align: left; padding: 14px; border-radius: var(--r-inner); border: 1px solid var(--line); background: var(--glass); cursor: pointer; }

/* bits used by widgets */
.stat { padding: 14px 16px; border-radius: var(--r-inner); }
.stat b { display: block; font-size: 34px; font-weight: 500; line-height: 1.05; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { padding: 14px 16px; border-radius: var(--r-inner); background: rgba(255,255,255,.05); border: 1px solid var(--line-soft); cursor: pointer; }
.card.sel { background: rgba(10,10,10,.55); border-color: var(--line-hard); }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; height: 100%; }
.kanban .col { background: var(--well); border-radius: var(--r-inner); padding: 10px; overflow: auto; }
.kanban .col > .card + .card { margin-top: 8px; }
.timeline { position: relative; }
.tl-item { display: grid; grid-template-columns: 64px 18px 1fr; gap: 10px; align-items: start; padding: 8px 0; cursor: pointer; }
.tl-item .rail-line { display: flex; flex-direction: column; align-items: center; height: 100%; }
.tl-item .rail-line::after { content: ""; flex: 1; width: 2px; background: var(--track); margin-top: 4px; min-height: 26px; }
.tl-item:last-child .rail-line::after { display: none; }
.hero-ph { border-radius: var(--r-inner); background: linear-gradient(160deg, #1D2C46, #132036 60%, #0C1526); min-height: 120px; display: flex; align-items: flex-end; padding: 14px; }
.btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.btn-row .lbtn { flex-direction: column; gap: 4px; min-height: 64px; border-radius: var(--r-inner); font-size: 13px; padding: 8px; }
.msg { padding: 10px 12px; border-radius: var(--r-inner); background: var(--well); }
.msg + .msg { margin-top: 8px; }
.ring { width: 120px; height: 120px; }
.vbars { display: flex; align-items: flex-end; gap: 10px; height: 100%; min-height: 120px; }
.vbars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.vbars i { width: 100%; max-width: 46px; border-radius: 8px; background: var(--bone); display: block; }
.vbars i.dash { background: transparent; border: 1.5px dashed var(--line-hard); }
.empty { padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.side-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--side), 100vw); background: rgba(8,18,38,.96); border-left: 1px solid var(--line); backdrop-filter: blur(var(--blur)); z-index: 40; padding: 22px; overflow: auto; transform: translateX(100%); transition: transform .2s; }
.side-panel.open { transform: none; }
.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: var(--bone); color: var(--ink); padding: 10px 18px; border-radius: var(--r-pill); z-index: 60; font-weight: 500; }

/* login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px); }
.login form { width: min(420px, 100%); padding: 32px; border-radius: var(--r-panel); }
.login img { height: 26px; margin-bottom: 22px; }

/* phone: one column, floating tab bar */
@media (max-width: 760px) {
  :root { --row: 80px; --gap: 12px; }
  .app { grid-template-columns: 1fr; grid-template-rows: calc(60px + var(--safe-top)) 1fr; }
  header.top { padding: var(--safe-top) 16px 0; position: sticky; top: 0; z-index: 20; background: rgba(6,12,24,.82); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
  nav.rail { display: none; }
  header.top .who { display: none; }
  header.top .logo { height: 18px; }
  .page-head .views { order: 3; width: 100%; overflow-x: auto; }
  main { padding: 16px 16px calc(110px + var(--safe-bottom)); }
  .page-head h1 { font-size: 24px; }
  .grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .widget { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: var(--mh, 160px); max-height: 80vh; }
  .editing .widget .grip, .editing .widget .resize { display: none; }
  .editing .widget .mv { display: inline-flex; }
  .tabbar { display: flex; position: fixed; left: 14px; right: 14px; bottom: calc(14px + var(--safe-bottom)); height: 64px; border-radius: var(--r-pill); z-index: 30; justify-content: space-around; align-items: center; padding: 0 6px; }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--muted); min-height: 44px; justify-content: center; }
  .tabbar a.on { color: var(--bone); }
}

.wheels { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.wheel { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; min-width: 0; }
.wheel svg { width: 64px; height: 64px; }
.wheel b { font-size: 13px; font-weight: 500; max-width: 100%; }
.spin { transform-origin: 32px 32px; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }