/* Telos PWA — moss/charcoal palette from telos-app.html. Light = priority; the queue
   recedes into shade (brief §PWA). No numeric weight ever shown. */
:root {
  --bg: #1e211c; --bg-lit: #262a24; --surface: #252922;
  --line: rgba(226, 233, 214, .09); --line-strong: rgba(226, 233, 214, .16);
  --text: #e8eadf; --text-2: rgba(232, 234, 223, .72); --text-3: rgba(232, 234, 223, .4);
  --amber: #dcaa5e; --amber-dim: rgba(220, 170, 94, .14);
  --sage: #9db98f; --sage-dim: rgba(157, 185, 143, .12);
  --serif: 'Fraunces', Georgia, serif; --sans: 'Figtree', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
body { -webkit-font-smoothing: antialiased; padding-bottom: env(safe-area-inset-bottom); }
#app { max-width: 640px; margin: 0 auto; padding: 22px 18px 96px; min-height: 100vh; }
a { color: var(--sage); text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; }

.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.topbar .crumb { font-family: var(--mono); font-size: 12px; color: var(--text-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn { background: none; border: 1px solid var(--line); color: var(--text-2); border-radius: 10px; padding: 7px 11px; font-size: 13px; cursor: pointer; }
.iconbtn:hover { background: var(--bg-lit); color: var(--text); }
.iconbtn.badge { border-color: var(--amber); color: var(--amber); }

.brief { background: var(--sage-dim); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; font-family: var(--serif); color: var(--text); }
.brief .sep { color: var(--text-3); font-family: var(--mono); font-size: 12px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.card.tap { cursor: pointer; }
.card.tap:hover { border-color: var(--line-strong); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.navlabel { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }

/* focus view */
.front { background: var(--bg-lit); border: 1px solid var(--line-strong); border-radius: 16px; padding: 20px; margin-bottom: 8px; }
.front h2 { margin: 0 0 6px; font-size: 24px; }
.front .sub { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.front .sub:first-of-type { border-top: 1px solid var(--line); margin-top: 12px; }
.front img.photo { max-width: 100%; border-radius: 10px; margin: 10px 0; border: 1px solid var(--line); }
.why { font-family: var(--serif); color: var(--text-2); font-size: 15px; margin: 6px 0 14px; }
.why .sep { color: var(--text-3); font-family: var(--mono); font-size: 12px; }
.why .terminus { color: var(--sage); }
.queue { margin-top: 40px; }
.queue .q-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; color: var(--text-2); cursor: pointer; }
.queue .q-row:hover { color: var(--text); border-color: var(--line-strong); }
.rankbtns { display: flex; gap: 4px; margin-left: auto; }
.rankbtns button { background: none; border: 1px solid var(--line); color: var(--text-3); border-radius: 7px; width: 26px; height: 26px; cursor: pointer; }
.rankbtns button:hover { color: var(--text); }

.nudge { background: var(--amber-dim); border: 1px solid rgba(220, 170, 94, .3); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { background: var(--amber); color: #20170a; border: none; border-radius: 10px; padding: 11px 16px; font-weight: 600; font-size: 14px; cursor: pointer; }
.btn.ghost { background: none; color: var(--text-2); border: 1px solid var(--line); }
.btn.ghost:hover { color: var(--text); border-color: var(--line-strong); }
.btn:disabled { opacity: .5; cursor: default; }

input, textarea { width: 100%; background: var(--bg-lit); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; padding: 12px 14px; }
input:focus, textarea:focus { outline: none; border-color: var(--amber); }
textarea { min-height: 110px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--text-2); margin: 12px 0 6px; }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; background: rgba(30, 33, 28, .94); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
.tabbar button { background: none; border: none; color: var(--text-3); font-size: 11px; font-family: var(--mono); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 14px; }
.tabbar button[aria-current="true"] { color: var(--amber); }
.tabbar .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

#toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--bg-lit); border: 1px solid var(--line-strong); color: var(--text); padding: 11px 18px; border-radius: 999px; font-size: 14px; z-index: 50; }
.orb { width: 16px; height: 16px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 var(--amber-dim); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 170, 94, .3); } 50% { box-shadow: 0 0 0 10px rgba(220, 170, 94, 0); } }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line-strong); border-top-color: var(--amber); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.offline { font-family: var(--mono); font-size: 11px; color: var(--amber); }