/* Clip Finder: only the few classes its app.js and its page build by hand.
   Every colour, font and radius is a Mythox token from codex-site.css. */

.app-label .note{ display:block; margin-top:6px; font-family:var(--sans); font-size:12.5px;
  letter-spacing:0; text-transform:none; color:var(--muted); font-weight:400; line-height:1.55; }

.app-area.out{ min-height:280px; white-space:pre; overflow-x:auto; }
.app-area.out.short{ min-height:160px; }
.app-area.in{ min-height:140px; white-space:pre-wrap; }
.app-area.in.tall{ min-height:220px; }

.status{ margin-top:12px; min-height:18px; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); line-height:1.6; }

.rowbtns{ margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* the ranked board app.js builds */
.rank{ margin-top:16px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-2); overflow:hidden; }
.rank .row{ padding:15px 16px; border-bottom:1px solid var(--border); }
.rank .row:last-child{ border-bottom:0; }
.rank .row .top{ display:flex; gap:10px; align-items:baseline; font-size:15px; font-weight:600;
  color:var(--text); letter-spacing:-.01em; }
.rank .row .top .pos{ color:var(--accent); font-family:var(--mono); font-size:12px; flex:0 0 auto; }
.rank .row .facts{ margin-top:6px; color:var(--dim); font-family:var(--mono); font-size:11.5px;
  line-height:1.65; font-variant-numeric:tabular-nums; }
.rank .row .verdict{ margin-top:8px; color:var(--muted); font-size:13.5px; line-height:1.6; }
.rank .row.skip{ opacity:.82; }
.rank .row.skip .verdict{ color:var(--text); border-left:2px solid var(--accent); padding-left:12px; }

/* the eight moments app.js builds */
.hook{ margin-top:12px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-2); padding:15px 16px; }
.hook .head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:14px; font-weight:600; color:var(--text); }
.hook .head .time{ color:var(--accent); font-family:var(--mono); font-size:12px;
  font-variant-numeric:tabular-nums; }
.hook .why{ margin-top:6px; color:var(--dim); font-size:12.5px; line-height:1.6; }
.hook .cap{ margin-top:8px; color:var(--muted); font-size:13.5px; line-height:1.6; }
.hook pre{ margin:12px 0 0; padding:13px 14px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); overflow-x:auto; white-space:pre;
  font-family:var(--mono); font-size:11.5px; line-height:1.65; color:var(--text); }

/* the week one plan app.js builds */
.day{ padding:14px 0; border-bottom:1px solid var(--border); }
.day:last-child{ border-bottom:0; }
.day h3{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0; }
.day p{ margin:8px 0 0; color:var(--dim); font-size:12.5px; line-height:1.6; }

/* the checklists app.js builds */
.checkitem{ display:flex; gap:13px; align-items:flex-start; padding:13px 0;
  border-bottom:1px solid var(--border); color:var(--muted); font-size:13.5px; line-height:1.6;
  cursor:pointer; }
.checkitem:last-child{ border-bottom:0; }
.day .checkitem{ margin-top:8px; padding:0; border-bottom:0; }
.checkitem input[type="checkbox"]{ width:17px; height:17px; flex:0 0 auto; margin-top:2px;
  accent-color:var(--accent); cursor:pointer; }
.checkitem input[type="checkbox"]:checked + span{ opacity:.5; text-decoration:line-through; }

/* the money box app.js builds */
.money{ margin-top:16px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-2); overflow:hidden; }
.money .line{ display:flex; justify-content:space-between; gap:14px; padding:13px 16px;
  border-bottom:1px solid var(--border); font-size:13.5px; }
.money .line:last-child{ border-bottom:0; }
.money .line span.k{ color:var(--muted); line-height:1.6; }
.money .line span.v{ color:var(--text); font-family:var(--mono); font-size:13px;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.money .line.big span.v{ color:var(--accent); font-size:15px; }
.money .line.warn span.v{ color:var(--text); opacity:.8; }