/* Ridgeback — 08 screens
   Rules owned by one screen each: threads, tools, photos, and Home's
   safety strip, stat cards, event rows and attribution cards. */

/* ── threads ── */
.thread-row{display:flex;align-items:flex-start;gap:var(--s3);width:100%;padding:13px 0;border:0;border-top:1px solid var(--line);
  background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:var(--hit)}
.thread-row:first-of-type{border-top:0}
.thread-row .body{display:grid;flex:1 1 0;min-width:0}
.thread-row .top{display:flex;align-items:center;gap:6px}
.thread-row .nm{color:var(--text)}
.thread-row .last{color:var(--text-3);margin-top:3px}
.thread-row .meta{display:flex;align-items:center;gap:6px;margin-top:6px}
.unread{flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent-solid);color:var(--on-accent);
  display:grid;place-items:center;font-size:11px;font-weight:700}
.msg{max-width:268px}
.msg .who-line{display:flex;align-items:center;gap:6px;color:var(--text-3);margin-bottom:4px}
.msg .bubble{background:var(--raised);border:1px solid var(--line);border-radius:17px 17px 17px 5px;padding:9px var(--s3);color:var(--text)}
.msg.mine{align-self:flex-end}
.msg.mine .who-line{justify-content:flex-end}
.msg.mine .bubble{background:var(--accent-solid);border-color:transparent;color:var(--on-accent);border-radius:17px 17px 5px 17px}
.msg-bobby .lead{font-family:var(--font-display);font-size:21px;line-height:28px;font-weight:500;color:var(--text);margin:0}
.msg-bobby .detail{color:var(--text-2);margin:var(--s2) 0 0}
.thread{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s5) var(--s5) var(--s4)}

/* ── tools ── */
.tool-row{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:56px;padding:11px 0;border:0;border-top:1px solid var(--line);
  background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.tool-row:first-of-type{border-top:0}
.tool-row .ic{flex:none;width:34px;height:34px;border-radius:var(--r-chip);background:var(--chip-fill);color:var(--saddle);display:grid;place-items:center}
.tool-row .ic svg{width:18px;height:18px}
.tool-row .body{display:grid;flex:1 1 0;min-width:0}
.tool-row .nm{color:var(--text)}
.tool-row .sub{color:var(--text-3);margin-top:1px}
.tool-row .state,.tool-row .chev{flex:none}
/* A capability section whose grant nobody holds: dashed, plus the words above. */
.tool-sec.is-dead .set-row{border-top-style:dashed}
.tool-row[aria-disabled="true"]{cursor:default}
.tool-row[aria-disabled="true"] .ic{background:transparent;border:1px dashed var(--line);color:var(--text-3)}
.tool-row[aria-disabled="true"] .nm{color:var(--text-3)}

/* ── photos ── */
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.photo{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--r-inner);overflow:hidden;background:var(--raised);
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.photo .fill{aspect-ratio:1;background:linear-gradient(150deg,var(--gold-soft),var(--amber-soft) 55%,var(--sage-soft));display:grid;place-items:end start;padding:8px}
.photo .cap{padding:8px 10px 10px;display:flex;flex-wrap:wrap;gap:5px}
.photo .when{display:block;width:100%;color:var(--text-3);margin-bottom:2px}


/* ── safety strip + stats + events (Home) ── */
.stat-card{padding:12px 13px}
.stat-card .eyebrow-row{display:flex;align-items:center;gap:6px;color:var(--text-3);margin-bottom:var(--s2)}
.stat-card .eyebrow-row svg{width:14px;height:14px;flex:none}
.stat-num{font-family:var(--font-display);font-size:30px;line-height:32px;font-weight:500;color:var(--text)}
.stat-num .unit{font-size:15px}
.stat-card .cap{color:var(--text-3);margin-top:3px}
.safety{margin-top:var(--s4);background:var(--chip-fill);border-radius:var(--r-card);padding:var(--s3) var(--s4) var(--s4)}
.safety-head{display:flex;align-items:center;gap:var(--s2)}
.safety-head .shield{width:17px;height:17px;color:var(--safe);flex:none}
.safety-head .headline{flex:1 1 auto;font-size:13.5px;line-height:18px;font-weight:600;color:var(--text)}
.safety-head .age{color:var(--espresso-2);flex:none}
.cap-bar{display:flex;height:5px;border-radius:var(--r-pill);overflow:hidden;margin:var(--s3) 0 var(--s2);background:var(--border-c)}
.cap-bar span{display:block;height:100%}
.cap-photos{background:var(--safe)}.cap-other{background:var(--accent)}
.cap-figs{display:flex;gap:var(--s3);color:var(--espresso-2)}
.cap-figs b{font-weight:600}
.events{display:flex;flex-direction:column;gap:var(--s3)}
.event{display:flex;align-items:stretch;gap:var(--s3);width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:var(--hit)}
.event .when{display:grid;flex:none;width:46px;padding-top:1px}
.event .when .d{color:var(--text);font-size:13px;line-height:19px;font-weight:600}
.event .when .m{color:var(--text-3)}
.event .rule{flex:none;width:2px;border-radius:2px;background:var(--line)}
.event.next .rule{background:var(--accent)}
.event .what{display:grid;flex:1 1 0;min-width:0;padding-bottom:2px}
.event .what .ttl{color:var(--text)}
.event .what .meta{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--text-3)}
.event.past .what .ttl,.event.past .when .d{color:var(--text-3)}
.event.past .when .d{font-weight:400}
.attr-list{display:flex;flex-direction:column;gap:var(--s2)}
.attr{display:flex;align-items:flex-start;gap:var(--s3);width:100%;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 15px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.attr .body{display:grid;flex:1 1 0;min-width:0}
.attr .by{display:flex;align-items:center;gap:6px;color:var(--text-3);margin-bottom:5px}
.attr .task{font-size:16px;line-height:20px;font-weight:600;letter-spacing:-.24px;color:var(--text)}
.attr .detail{color:var(--text-3);margin-top:3px}
.attr[aria-pressed="true"] .task{text-decoration:line-through;color:var(--text-3);font-weight:400}
.attr.fresh{animation:settle 260ms var(--ease-out) both}
@keyframes settle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── safe mode ──
   Sage is the data-safety colour in this system and safe mode is the household's
   protection of a person, so it is the one place outside backup that may use it.
   The word carries the meaning; the border only reinforces it. */
.safe-panel{border:1.5px solid var(--safe);border-radius:var(--r-inner);padding:var(--s4);background:var(--raised)}

/* ── storage settings ──
   A stored credential that can never be shown again. The row exists, reads as
   present, and has no reveal control, because there is nothing behind one. */
.kv{display:grid;gap:2px;padding:9px 0;border-top:1px solid var(--line)}
.kv:first-of-type{border-top:0}
.kv .k{color:var(--text-3)}
.kv .v{color:var(--text);overflow-wrap:anywhere}
.kv .v.secret{color:var(--text-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.verify{display:grid;gap:var(--s2);border:1px solid var(--line);border-radius:var(--r-inner);padding:var(--s4);background:var(--raised)}
.verify .bar{height:4px;border-radius:var(--r-pill);background:var(--chip-fill);overflow:hidden}
.verify .bar i{display:block;height:100%;width:40%;background:var(--accent-solid);
  animation:verify-slide 1100ms var(--ease-out) infinite}
@keyframes verify-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion: reduce){.verify .bar i{animation:none;width:100%}}