/* ============================================================
   SCREEN-SPECIFIC STYLES
   ============================================================ */

/* ---- Home: net worth card ---- */
.nwc .chartbg { position:absolute; left:0; right:0; bottom:0; height:60%; opacity:.5; pointer-events:none; }
.nwc .nwnum { font-family:var(--mono); font-size:42px; font-weight:700; color:var(--accent); letter-spacing:-.02em; margin:5px 0 3px; position:relative; }
.nwc .nwd { font-family:var(--mono); font-size:12.5px; display:flex; gap:16px; position:relative; }
.nwc .allocbar { display:flex; gap:5px; margin-top:auto; position:relative; }
.nwc .allocbar .s { height:8px; border-radius:3px; }
.nwc .alleg { display:flex; gap:14px; margin-top:9px; position:relative; flex-wrap:wrap; }
.nwc .alleg span { font-family:var(--mono); font-size:10.5px; color:var(--tx-1); display:flex; align-items:center; gap:5px; }
.nwc .alleg i { width:8px; height:8px; border-radius:2px; }

/* quota card */
.quotacard { align-items:center; justify-content:center; gap:7px; }
.quotacard .gauge .lab b { font-size:23px; }

/* brief card */
.briefcard .bh { display:flex; align-items:center; gap:9px; margin-bottom:3px; }
.briefcard .bh .ic { width:21px; height:21px; border-radius:6px; display:grid; place-items:center; color:#180f04; font-family:var(--mono); font-weight:700; font-size:12px; background:var(--accent-grad); }
.briefcard .bh b { font-size:13.5px; }
.briefcard .bh .t { margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--tx-2); }
.briefcard .pr { display:flex; gap:11px; padding:9px 0; border-bottom:1px solid color-mix(in oklch, var(--line) 55%, transparent); font-size:12.5px; color:var(--tx-1); line-height:1.45; }
.briefcard .pr .n { font-family:var(--mono); font-size:12px; color:var(--accent); font-weight:700; flex-shrink:0; }
.briefcard .ask { margin-top:11px; padding-top:11px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--tx-2); cursor:pointer; }
.briefcard .ask b { color:var(--blue); font-weight:500; }
.briefcard .ask:hover b { text-decoration:underline; }

/* alerts panel */
.alist { padding:8px; display:flex; flex-direction:column; gap:1px; }
.al { display:flex; gap:11px; align-items:flex-start; padding:9px 10px; border-radius:8px; }
.al:hover { background:var(--bg-2); }
.al .ad { width:7px; height:7px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.al .at { font-size:12.5px; color:var(--tx-0); line-height:1.4; }
.al .as { font-family:var(--mono); font-size:10px; color:var(--tx-2); margin-top:2px; }

/* alert variants — amber left border for attention, red for critical */
.al.al-warn { background:color-mix(in oklch,var(--amber) 6%,transparent); border-left:2px solid var(--amber); border-radius:0 8px 8px 0; padding-left:9px; }
.al.al-crit { background:color-mix(in oklch,var(--red) 5%,transparent); border-left:2px solid var(--red); border-radius:0 8px 8px 0; padding-left:9px; }
.al.al-ok   { border-left:2px solid transparent; }

/* brief items — left accent per severity */
.brief-item-warn  { border-left:2px solid var(--accent); padding-left:10px; }
.brief-item-amber { border-left:2px solid var(--amber); padding-left:10px; background:color-mix(in oklch,var(--amber) 5%,transparent); border-radius:0 6px 6px 0; }
.brief-item-info  { border-left:2px solid var(--blue); padding-left:10px; }

/* activity mini list (kept for automation screen) */
.actlist { padding:8px; display:flex; flex-direction:column; gap:1px; }
.actmini { display:flex; gap:11px; align-items:flex-start; padding:9px 10px; border-radius:8px; cursor:pointer; }
.actmini:hover { background:var(--bg-2); }
.actmini .am-t { font-size:12px; color:var(--tx-1); line-height:1.4; }
.actmini .am-t b { color:var(--tx-0); font-family:var(--mono); font-size:11px; }
.actmini .am-s { font-family:var(--mono); font-size:10px; color:var(--tx-2); margin-top:2px; }

/* ---- gold accents ---- */
.xau-strip {
  display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px;
  border-top:1px solid #3a2f14; font-family:var(--mono); font-size:11px;
}
.xau-ic { color:#c9a84c; font-size:13px; }
.xau-lbl { color:var(--tx-2); }
.xau-px { color:#c9a84c; font-weight:600; }
.xau-chg { }
.xau-divider { width:1px; height:10px; background:#3a2f14; margin:0 4px; }

.mrow-gold { background:color-mix(in oklch,#c9a84c 5%,transparent); border-radius:6px; padding-left:6px; margin-left:-6px; }

.brief-item-gold { border-left:2px solid #c9a84c; padding-left:10px; background:color-mix(in oklch,#c9a84c 5%,transparent); border-radius:0 6px 6px 0; }

.al.al-gold { background:color-mix(in oklch,#c9a84c 5%,transparent); border-left:2px solid #c9a84c; border-radius:0 8px 8px 0; padding-left:9px; }

.todo-list { padding:8px; display:flex; flex-direction:column; gap:1px; }
.todo-row { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.todo-row:hover { background:var(--bg-2); }
.todo-cb { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--tc, var(--tx-2)); flex-shrink:0;
  display:grid; place-items:center; transition:background .12s, border-color .12s; }
.todo-cb svg { width:11px; height:11px; stroke:var(--bg-0); }
.todo-row.done .todo-cb { background:var(--tc, var(--green)); border-color:var(--tc, var(--green)); }
.todo-text { flex:1; font-size:12.5px; color:var(--tx-0); line-height:1.35; }
.todo-row.done .todo-text { color:var(--tx-2); text-decoration:line-through; }
.todo-tag { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.05em;
  border:1px solid; border-radius:100px; padding:1px 7px; flex-shrink:0; }

.pulse { animation:pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---- generic stat tiles ---- */
.stat { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:5px; position:relative; overflow:hidden; }
.stat .sl { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-2); }
.stat .sv { font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:-.02em; }
.stat .sd { font-family:var(--mono); font-size:11.5px; }
.stat .sparkbg { position:absolute; right:0; bottom:0; left:0; height:42%; opacity:.4; }

/* ---- project detail ---- */
.detail-head { display:flex; align-items:flex-start; gap:16px; }
.backbtn { width:34px; height:34px; border-radius:9px; border:1px solid var(--line-2); background:var(--bg-1); display:grid; place-items:center; cursor:pointer; color:var(--tx-1); flex-shrink:0; }
.backbtn:hover { color:var(--tx-0); border-color:var(--tx-2); }
.backbtn svg { width:17px; height:17px; }
.detail-title { flex:1; }
.detail-title h1 { font-family:var(--mono); font-size:22px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:12px; }
.detail-title .meta { display:flex; gap:14px; margin-top:6px; font-family:var(--mono); font-size:11.5px; color:var(--tx-2); flex-wrap:wrap; }
.detail-title .meta span { display:flex; align-items:center; gap:5px; }
.detail-title .meta svg { width:13px; height:13px; }

/* ---- graveyard ---- */
.grave-card { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); padding:16px 17px; display:flex; flex-direction:column; gap:9px; opacity:.78; transition:opacity .15s; position:relative; overflow:hidden; }
.grave-card:hover { opacity:1; }
.grave-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tx-2); }
.grave-card .gname { font-family:var(--mono); font-size:14px; font-weight:600; color:var(--tx-1); text-decoration:line-through; text-decoration-color:var(--tx-2); }
.grave-card .greason { font-size:12.5px; color:var(--tx-1); }
.grave-card .glesson { font-size:12px; color:var(--tx-2); border-top:1px solid var(--line); padding-top:9px; line-height:1.45; }
.grave-card .gmeta { font-family:var(--mono); font-size:10.5px; color:var(--tx-2); display:flex; justify-content:space-between; }

/* ---- journal ---- */
.tradechip { font-family:var(--mono); font-size:10px; font-weight:700; padding:2px 8px; border-radius:5px; }
.tradechip.buy { color:var(--green); background:var(--green-dim); }
.tradechip.sell { color:var(--red); background:var(--red-dim); }

/* ---- gold widget ---- */
.gold-widget {
  background: var(--bg-1); border: 1px solid #3a2f14;
  border-radius: var(--r); padding: 15px 18px;
  display: grid; grid-template-columns: 1fr 320px auto;
  gap: 18px; align-items: center;
  box-shadow: 0 0 0 1px #c9a84c22, 0 0 28px -10px #c9a84c44;
}
.gw-left { display: flex; flex-direction: column; gap: 4px; }
.gw-price { font-family: var(--mono); font-size: 36px; font-weight: 700;
  color: #c9a84c; letter-spacing: -.02em; margin: 3px 0 2px; }
.gw-unit { font-size: 14px; color: var(--tx-2); font-weight: 400; }
.gw-chg { font-family: var(--mono); font-size: 12.5px; }
.gw-note { font-size: 11.5px; line-height: 1.4; margin-top: 4px; max-width: 360px; }
.gw-chart { overflow: hidden; border-radius: 8px; height: 80px; }
.gw-right { display: flex; flex-direction: column; gap: 0; min-width: 160px; }
.gw-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 5px 0; border-bottom: 1px solid color-mix(in oklch, var(--line) 50%, transparent);
  font-family: var(--mono); font-size: 12px; }
.gw-row:last-child { border-bottom: 0; }
.gw-row .mut { color: var(--tx-2); }
.gw-divider { height: 1px; background: #3a2f14; margin: 4px 0; }

/* ---- notes ---- */
.note-card { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:8px; cursor:pointer; transition:border-color .15s; break-inside:avoid; }
.note-card:hover { border-color:var(--line-2); }
.note-card .nt { font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; }
.note-card .nt svg { width:13px; height:13px; color:var(--accent); flex-shrink:0; }
.note-card .nb { font-size:12px; color:var(--tx-1); line-height:1.5; white-space:pre-wrap; }
.note-card .nm { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; color:var(--tx-2); }

/* ---- chat ---- */
.chat-wrap { display:flex; flex-direction:column; gap:14px; max-width:880px; margin:0 auto; width:100%; }
.msg { display:flex; gap:12px; }
.msg .mav { width:30px; height:30px; border-radius:8px; flex-shrink:0; display:grid; place-items:center; font-family:var(--mono); font-size:12px; font-weight:700; }
.msg.user .mav { background:var(--bg-3); color:var(--tx-1); }
.msg.ai .mav { background:var(--accent-grad); color:#180f04; }
.msg .mbody { flex:1; padding-top:4px; }
.msg .mbody .who { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-2); margin-bottom:5px; }
.msg .mbody .mtext { font-size:13.5px; line-height:1.62; color:var(--tx-0); white-space:pre-wrap; }
.msg .mbody .mtext b { color:var(--accent-soft); }

/* ---- automation / routines ---- */
.routine-card { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; display:flex; flex-direction:column; gap:11px; position:relative; overflow:hidden; }
.routine-card.off { opacity:.6; }
.routine-card .rc-top { display:flex; align-items:flex-start; gap:11px; }
.routine-card .rc-ic { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; color:var(--accent); background:var(--accent-dim); }
.routine-card .rc-ic svg { width:17px; height:17px; }
.routine-card .rc-name { font-size:14px; font-weight:600; }
.routine-card .rc-trig { font-family:var(--mono); font-size:11px; color:var(--tx-2); margin-top:2px; display:flex; align-items:center; gap:6px; }
.routine-card .rc-desc { font-size:12px; color:var(--tx-1); line-height:1.45; }
.routine-card .rc-action { font-family:var(--mono); font-size:11px; color:var(--tx-1); background:var(--bg-0); border:1px solid var(--line); border-radius:7px; padding:8px 10px; line-height:1.4; }
.routine-card .rc-foot { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10.5px; color:var(--tx-2); }
.trigpill { font-family:var(--mono); font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:100px; }
.trigpill.scheduled { color:var(--blue); background:color-mix(in oklch, var(--blue) 16%, transparent); }
.trigpill.event { color:var(--accent); background:var(--accent-dim); }
.trigpill.ondemand { color:var(--green); background:var(--green-dim); }

/* ---- activity feed ---- */
.feed { display:flex; flex-direction:column; }
.feed-row { display:flex; gap:13px; padding:13px 16px; border-bottom:1px solid color-mix(in oklch, var(--line) 60%, transparent); cursor:pointer; align-items:flex-start; }
.feed-row:hover { background:var(--bg-2); }
.feed-row .fr-ic { margin-top:1px; }
.feed-row .fr-body { flex:1; min-width:0; }
.feed-row .fr-t { font-size:13px; color:var(--tx-0); line-height:1.4; }
.feed-row .fr-t b { font-family:var(--mono); font-size:11.5px; color:var(--accent-soft); margin-right:4px; }
.feed-row .fr-s { font-family:var(--mono); font-size:10.5px; color:var(--tx-2); margin-top:3px; display:flex; gap:12px; }
.feed-row .fr-out { font-family:var(--mono); font-size:11px; color:var(--tx-1); background:var(--bg-0); border:1px solid var(--line); border-radius:7px; padding:9px 11px; margin-top:9px; line-height:1.5; white-space:pre-wrap; display:none; }
.feed-row.open .fr-out { display:block; }
.feed-row .fr-chev { color:var(--tx-2); transition:transform .15s; flex-shrink:0; margin-top:2px; }
.feed-row .fr-chev svg { width:14px; height:14px; transform:rotate(-90deg); }
.feed-row.open .fr-chev svg { transform:rotate(-90deg) scaleX(-1); }

/* ---- settings ---- */
.set-group { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.set-row { display:flex; align-items:center; gap:14px; padding:14px 17px; border-bottom:1px solid color-mix(in oklch, var(--line) 60%, transparent); }
.set-row:last-child { border-bottom:0; }
.set-row .sr-info { flex:1; }
.set-row .sr-t { font-size:13px; color:var(--tx-0); }
.set-row .sr-d { font-size:11.5px; color:var(--tx-2); margin-top:2px; }

/* mono mini bars for usage */
.usebar-row { display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; padding:8px 0; }
.usebar-row .ul { width:120px; color:var(--tx-1); }
.usebar-row .ub { flex:1; height:9px; background:var(--bg-3); border-radius:3px; overflow:hidden; }
.usebar-row .ub i { display:block; height:100%; }
.usebar-row .uv { width:64px; text-align:right; color:var(--tx-0); }

/* ============================================================
   DAILY TRACING
   ============================================================ */

/* activity cards */
.act-card { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px; display:flex; flex-direction:column; gap:6px; transition:border-color .15s; }
.act-card:hover { border-color:var(--line-2); }
.act-card.pending { opacity:.75; }
.ac-head { display:flex; align-items:flex-start; gap:10px; }
.ac-emoji { font-size:22px; line-height:1; margin-top:2px; }
.ac-meta { flex:1; min-width:0; }
.ac-name { font-size:13.5px; font-weight:600; }
.ac-goal { font-family:var(--mono); font-size:10px; margin-top:2px; }
.ac-streak { text-align:center; flex-shrink:0; }
.ac-today { display:flex; align-items:baseline; gap:8px; margin-top:4px; }
.ac-week { display:flex; gap:4px; align-items:flex-end; height:32px; margin-top:10px; }
.ac-wbar { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; height:100%; justify-content:flex-end; }
.ac-wbar-fill { width:100%; border-radius:2px; transition:height .3s ease; min-height:4px; }
.ac-wday { font-family:var(--mono); font-size:8.5px; color:var(--tx-2); }
.ac-wday.today { color:var(--accent); font-weight:700; }

/* timeline */
.tl-list { padding:10px 14px 12px; display:flex; flex-direction:column; gap:0; }
.tl-row { display:flex; gap:12px; align-items:flex-start; padding:10px 0; position:relative; }
.tl-row:not(:last-child)::after { content:''; position:absolute; left:52px; top:26px; bottom:-2px; width:1px; background:var(--line); }
.tl-time { font-size:11px; color:var(--tx-2); width:36px; flex-shrink:0; padding-top:2px; }
.tl-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:3px; box-shadow:0 0 8px -2px currentColor; }
.tl-body { flex:1; line-height:1.4; padding-top:0; }
.tl-row.pending-row .tl-dot { opacity:.4; }
.tl-row.pending-row .tl-body { opacity:.5; }

/* heatmap */
.heatmap-wrap { display:flex; gap:6px; }
.hm-days { display:flex; flex-direction:column; gap:3px; padding-top:2px; }
.hm-day { font-family:var(--mono); font-size:8.5px; color:var(--tx-2); height:11px; display:flex; align-items:center; }
.hm-grid { display:grid; grid-template-rows:repeat(7,11px); grid-auto-flow:column; gap:3px; }
.hc { width:11px; height:11px; border-radius:2px; }
.hm-legend { display:flex; align-items:center; gap:5px; margin-top:10px; font-family:var(--mono); font-size:9.5px; color:var(--tx-2); }
.hm-legend .hc { width:10px; height:10px; }
.hm-acts { display:flex; flex-direction:column; gap:8px; }
.hma-row { display:flex; align-items:center; gap:8px; font-size:12px; }

/* log modal overlay */
.log-modal { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:100; display:flex; align-items:center; justify-content:center; }
.log-modal .lm-box { background:var(--bg-2); border:1px solid var(--line-2); border-radius:16px; width:400px; padding:22px 22px 18px; display:flex; flex-direction:column; gap:14px; }
.log-modal h3 { font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; }
.log-modal h3 svg { width:16px; height:16px; flex-shrink:0; }
.log-modal .lm-opts { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.log-modal .lm-opt { padding:12px 10px; border-radius:10px; border:1px solid var(--line-2); background:var(--bg-1); cursor:pointer; display:flex; align-items:center; gap:9px; font-size:13px; }
.log-modal .lm-opt:hover { border-color:var(--accent); }
.log-modal .lm-opt .le { font-size:18px; }
.log-modal .lm-inp { display:flex; flex-direction:column; gap:6px; }
.log-modal .lm-inp label { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-2); }
.log-modal .lm-inp input { background:var(--bg-1); border:1px solid var(--line-2); border-radius:8px; padding:9px 12px; color:var(--tx-0); font-family:var(--mono); font-size:13px; outline:0; }
.log-modal .lm-inp input:focus { border-color:var(--accent); }
.log-modal .lm-actions { display:flex; gap:8px; justify-content:flex-end; }

/* ============================================================
   RESPONSIVE — SCREEN-SPECIFIC
   ============================================================ */

/* ---- Home ---- */
@media (max-width:639px){
  /* Net worth number smaller */
  .nwc .nwnum { font-size:32px; }
  .nwc .nwd { font-size:11px; flex-wrap:wrap; gap:8px; }

  /* Gold widget: stack vertically */
  .gold-widget { grid-template-columns:1fr; gap:12px; }
  .gw-price { font-size:28px; }
  .gw-chart { height:60px; }

  /* Detail head: stack on mobile */
  .detail-head { flex-direction:column; gap:12px; }

  /* Notes masonry → single col */
  .notes-masonry { columns:1 !important; }

  /* Log modal: full-width */
  .log-modal .lm-box { width:calc(100vw - 32px); padding:18px 16px 14px; }
  .log-modal .lm-opts { grid-template-columns:1fr; }

  /* Routine cards */
  .routine-card .rc-foot { flex-wrap:wrap; }

  /* Feed rows */
  .feed-row { padding:10px 12px; }

  /* Stats grid → 2 col on mobile still fits */
  .stat .sv { font-size:22px; }

  /* Activity cards */
  .ac-week { height:26px; }

  /* Settings rows */
  .set-row { flex-wrap:wrap; gap:8px; }

  /* Graveyard */
  .grave-card .gmeta { flex-direction:column; gap:4px; }

  /* dtable wrapper (applied per-screen inline) */
  .mob-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r); }
  .mob-scroll .dtable { min-width:460px; }
}

@media (max-width:639px) and (max-height:700px){
  /* short phone (SE size): compress view padding */
  .view { padding-top:8px; }
}

/* ---- mobile polish: touch targets + spacing ---- */
@media (max-width:639px){
  /* Bigger touch targets for clickable rows */
  .dtable tbody tr.clickable td { padding:13px 12px; }
  .feed-row { padding:12px 14px; }
  .actmini { padding:11px 12px; }
  .todo-row { padding:10px 12px; }
  .set-row { padding:13px 14px; }

  /* Stack detail-title meta */
  .detail-title h1 { font-size:18px; flex-wrap:wrap; gap:8px; }
  .detail-title .meta { gap:8px; }

  /* Routine cards: simplify */
  .routine-card { padding:13px 14px; }
  .routine-card .rc-action { font-size:10.5px; }

  /* Claude gauge smaller on mobile */
  .quotacard .gauge { transform:scale(.85); }

  /* Notes: single column auto */
  .note-card { break-inside:avoid; }

  /* Tabs: scrollable */
  .tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .tabs::-webkit-scrollbar { display:none; }

  /* vtitle: wrap buttons */
  .vtitle { flex-wrap:wrap; gap:8px; }
  .vtitle h1 { font-size:17px; }

  /* phead links accessible */
  .phead .link { padding:4px 0; }

  /* Gold widget mobile */
  .gw-price { font-size:26px; }
  .gw-right { display:grid; grid-template-columns:1fr 1fr; gap:0; }
  .gw-divider { display:none; }

  /* Heatmap: allow scroll */
  .heatmap-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }

  /* Cmdbar: full width */
  .cmdbar { border-radius:8px; padding:0 12px; }
  .cmdbar input { font-size:12px; }
  .cmdbar kbd { display:none; }
}