/* Student Companion additions on top of the house tokens/components. */
.rail { overflow-y: auto; }
.rail-item .count { margin-left: auto; color: var(--fg-3); font-size: var(--t-xs); }
.persona { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
.persona select { width: 100%; }
.persona .who { font-size: var(--t-xs); color: var(--fg-3); margin-top: var(--s-1); }

.mobile-nav { display: none; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--border); background: var(--bg-2); }
.mobile-nav select { flex: 1; min-width: 0; }
@media (max-width: 860px) { .mobile-nav { display: flex; } .topbar .seg { display: none; } }

.content { overflow-y: auto; }
.wrap { max-width: 860px; }
section + section { margin-top: var(--s-6); }

.ask { display: flex; gap: var(--s-2); }
.ask .field { flex: 1; min-width: 0; padding: 8px var(--s-3); font-size: var(--t-md); }
.ask .btn-primary { padding: 8px var(--s-4); }
.hint { color: var(--fg-3); font-size: var(--t-xs); margin-top: var(--s-2); }

.list { border-top: 1px solid var(--border); }
.list > button, .list > div.row {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-2) 0; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--fg); font: inherit; font-size: var(--t-sm); text-align: left;
}
.list > button { cursor: pointer; }
.list > button:hover { color: var(--accent); }
.list .meta { margin-left: auto; color: var(--fg-3); font-size: var(--t-xs); white-space: nowrap; }
.list .date { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-2); width: 84px; flex: none; }

.btn { background: var(--bg-2); color: var(--fg); border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 6px var(--s-3); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.btn:hover { border-color: var(--fg-3); }
.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: var(--t-sm); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* conversation */
.turn-q { color: var(--fg-2); font-size: var(--t-sm); padding: var(--s-2) 0; }
.turn-q b { color: var(--fg); font-weight: 500; }
.answer { border-top: 1px solid var(--border); padding: var(--s-3) 0 var(--s-4); }
.answer p { margin: 0 0 var(--s-3); max-width: 68ch; }
.source { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-xs); color: var(--fg-3); margin-bottom: var(--s-3); }
.source b { color: var(--fg-2); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.actions .spacer { flex: 1; }
.fb { display: inline-flex; gap: var(--s-1); align-items: center; font-size: var(--t-xs); color: var(--fg-3); }
.fb button { font-size: var(--t-xs); padding: 2px var(--s-2); }
.fb button[aria-pressed='true'] { background: var(--bg-3); color: var(--fg); }
.office { font-size: var(--t-sm); color: var(--fg-2); border-left: 2px solid var(--border-2); padding: var(--s-1) var(--s-3); margin: var(--s-3) 0; }
.office b { color: var(--fg); font-weight: 500; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); font-size: var(--t-sm); }
.kv dt { color: var(--fg-3); }
.kv dd { margin: 0; }

.form { display: grid; gap: var(--s-3); max-width: 460px; }
.form label { display: grid; gap: var(--s-1); font-size: var(--t-xs); color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--track-label); }
.form textarea.field { min-height: 90px; resize: vertical; }

.progress { height: 8px; background: var(--bg-3); border-radius: var(--r-sm); overflow: hidden; margin: var(--s-2) 0; }
.progress i { display: block; height: 100%; background: var(--chart-1); }
.ok-line { border-left: 2px solid var(--ok); background: var(--bg-2); padding: var(--s-2) var(--s-3); font-size: var(--t-sm); margin-bottom: var(--s-4); }

.tbl-wrap { overflow-x: auto; }
.cmp th, .cmp td { white-space: nowrap; }

@media (max-width: 860px) { .shell > .rail { display: none; } .list .meta { display: none; } }