/* The page's one stylesheet: every page, the modal and every tab use this
   file and nothing else (docs/plans/2026-10-05-screen-flow.md §9b). Design
   decisions are named once, in :root, and used by name. Values computed from
   data (a calendar bar's position and colour, a progress bar's width) are the
   only styling set elsewhere, by the scripts. */
:root{
  --paper: #E8E4D9;
  --paper-raised: #F2EFE6;
  --ink: #24221D;
  --ink-soft: #6B665A;
  --ink-faint: #9A9484;
  --rule: #C7C0AC;
  --accent: #3C6E64;
  --accent-soft: #DCE6E2;
  --amber: #A6752C;
  --amber-soft: #EFE3CE;
  --error: #B0392F;
  --font-ui: 'Inter', sans-serif;
  --font-text: 'Spectral', serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:48px 26px 120px;
}
header h1{
  font-family:var(--font-text);
  font-weight:500;
  font-size:2.2rem;
  line-height:1.15;
  margin:0 0 8px;
  letter-spacing:-0.01em;
}
header p.sub{
  font-size:0.95rem;
  color:var(--ink-soft);
  margin:0 0 12px;
  max-width:60ch;
  line-height:1.5;
}
.note{
  font-size:0.82rem;
  color:var(--ink-faint);
  margin:0 0 36px;
  border-left:2px solid var(--rule);
  padding-left:12px;
}
nav.tabs{
  display:flex;
  gap:4px;
  margin-bottom:28px;
  border-bottom:1px solid var(--rule);
}
nav.tabs button{
  background:none;
  border:none;
  font-family:var(--font-ui);
  font-size:0.9rem;
  color:var(--ink-soft);
  padding:10px 4px;
  margin-right:22px;
  cursor:pointer;
  border-bottom:2px solid transparent;
}
nav.tabs button.active{
  color:var(--ink);
  border-bottom-color:var(--accent);
  font-weight:500;
}
.view{display:none;}
.view.active{display:block;}

/* Calendar view */
.day-row{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:16px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid #DDD8C9;
}
.day-row .day-label{
  font-size:0.82rem;
  color:var(--ink-soft);
}
.day-row .day-label .num{
  font-family:var(--font-text);
  font-size:1.15rem;
  color:var(--ink);
  display:block;
}
.track{
  position:relative;
  height:26px;
  background:var(--paper-raised);
  border-radius:3px;
  border:1px solid var(--rule);
}
.grid-line{
  position:absolute;
  top:0; bottom:0;
  width:1px;
  background:#DDD8C9;
}
.bar{
  position:absolute;
  top:3px;
  height:20px;
  border-radius:3px;
  cursor:pointer;
  opacity:0.88;
  transition:opacity .1s;
}
.bar:hover{opacity:1; outline:1.5px solid var(--ink);}
.legend-crit{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-size:0.75rem;
  color:var(--ink-faint);
}
.legend-crit .swatch{
  width:14px; height:14px;
  border-radius:3px;
  background:var(--accent-soft);
  box-shadow: 0 0 0 2px var(--error), 0 0 0 3px var(--paper-raised) inset;
}
.flag-key{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:10px;
  font-size:0.75rem;
  color:var(--ink-faint);
}
.flag-key span.tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.flag-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px; height:15px;
  border-radius:50%;
  font-size:9px;
  color:#fff;
  line-height:1;
}
.flag-icon.critical{ background:var(--error); }
.flag-icon.angry{ background:#C7791E; }
.flag-icon.caps{ background:#5B4F8C; }

.bar-flags{
  position:absolute;
  top:-16px;
  left:0;
  display:flex;
  gap:2px;
}
.bar-flags .flag-icon{
  width:13px; height:13px;
  font-size:8px;
  cursor:pointer;
}
.bar-flags .flag-icon:hover{
  outline:1.5px solid var(--ink);
}

/* Review tab */
.review-controls{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.review-controls input[type="search"]{
  flex:1;
  min-width:220px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  padding:9px 12px;
  font-family:var(--font-ui);
  font-size:0.88rem;
  color:var(--ink);
  border-radius:4px;
}
.review-controls select{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  padding:9px 10px;
  font-family:var(--font-ui);
  font-size:0.85rem;
  border-radius:4px;
}
.review-count{
  font-size:0.8rem;
  color:var(--ink-faint);
  margin-left:auto;
}
.filter-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--amber-soft);
  border:1px solid #D8C79A;
  border-radius:5px;
  padding:9px 14px;
  margin-bottom:14px;
  font-size:0.82rem;
  color:var(--ink);
}
tr.row-highlight{
  animation: rowFlash 1.8s ease-out;
}
@keyframes rowFlash{
  0% { background:#F4E3B0; }
  100% { background:transparent; }
}
.save-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding:10px 14px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:5px;
  flex-wrap:wrap;
}
.save-status{
  font-size:0.78rem;
  color:var(--ink-faint);
  flex:1;
}
.btn-secondary{
  background:#fff;
  border:1px solid var(--rule);
  padding:7px 12px;
  font-size:0.8rem;
  border-radius:4px;
  cursor:pointer;
  color:var(--ink);
  font-family:var(--font-ui);
}
.btn-secondary:hover{ border-color:var(--accent); }

table.review{
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
}
table.review th{
  text-align:left;
  font-weight:500;
  color:var(--ink-soft);
  font-size:0.72rem;
  padding:6px 8px;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
table.review td{
  padding:10px 8px;
  border-bottom:1px solid #DDD8C9;
  vertical-align:top;
}
table.review td.when{
  font-size:0.75rem;
  color:var(--ink-faint);
  white-space:nowrap;
}
table.review td.conv-name{
  font-size:0.78rem;
  color:var(--ink-soft);
  max-width:140px;
}
table.review td.msg-text{
  font-size:0.85rem;
  line-height:1.45;
  max-width:480px;
}
table.review td.flag-cell{
  text-align:center;
  white-space:nowrap;
}
.flag-checkbox{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.flag-checkbox input{
  width:16px; height:16px;
  cursor:pointer;
  accent-color:var(--accent);
}
.review-status{
  display:block;
  margin-top:4px;
  font-size:0.62rem;
  color:var(--ink-faint);
}
.review-status.is-reviewed{ color:var(--amber); font-weight:600; }

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:20px;
  font-size:0.85rem;
}
.pagination button{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  padding:7px 14px;
  border-radius:4px;
  cursor:pointer;
  font-family:var(--font-ui);
}
.pagination button:disabled{
  opacity:0.4;
  cursor:default;
}

/* Sign-in and Upload pages: a narrow column with one panel */
.page-narrow{
  max-width:560px;
  margin:80px auto 0;
}
.page-narrow header{ margin-bottom:0; }
.load-panel{
  margin-top:32px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:26px 28px;
}
.load-field{
  margin-bottom:20px;
}
.load-field label{
  display:block;
  font-size:0.85rem;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.load-field .req{ color:var(--error); font-size:0.75rem; }
.load-field .opt{ color:var(--ink-faint); font-size:0.75rem; }
.load-field input[type="text"]{
  font-family:var(--font-ui);
  font-size:0.88rem;
  padding:8px 10px;
  border:1px solid var(--rule);
  border-radius:4px;
  background:#fff;
  color:var(--ink);
  margin-right:8px;
}
.load-field input[type="file"]{
  font-family:var(--font-ui);
  font-size:0.85rem;
  width:100%;
}
.btn-primary{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:10px 20px;
  font-size:0.9rem;
  border-radius:4px;
  cursor:pointer;
  font-family:var(--font-ui);
}
.btn-primary:hover{ opacity:0.92; }
.load-status{
  margin-top:14px;
  font-size:0.82rem;
  color:var(--ink-faint);
  min-height:1.2em;
}

/* Global toggle bar */
.global-toggles{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  padding:12px 16px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:6px;
  margin-bottom:22px;
  font-size:0.85rem;
}
.toggle-field{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  white-space:nowrap;
}
.toggle-field input{ accent-color:var(--accent); cursor:pointer; }


/* Claude reply rows in Review */
tr.claude-reply-row{
  background:var(--paper-raised);
}
tr.claude-reply-row td{
  padding-left:24px;
  color:var(--ink-soft);
  font-size:0.85rem;
  line-height:1.45;
}
tr.claude-reply-row .who-label{
  font-style:normal;
  font-weight:600;
  font-size:0.7rem;
  color:var(--accent);
  display:block;
  margin-bottom:2px;
}

/* Analytics tab */
.analytics-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:0;
  border:1px solid var(--rule);
}
.analytics-menu{
  border-right:1px solid var(--rule);
  background:var(--paper-raised);
  display:flex;
  flex-direction:column;
}
.analytics-item{
  text-align:left;
  background:none;
  border:none;
  border-bottom:1px solid #DDD8C9;
  padding:14px 16px;
  font-family:var(--font-ui);
  font-size:0.86rem;
  color:var(--ink);
  cursor:pointer;
}
.analytics-item:hover{ background:var(--accent-soft); }
.analytics-item.active{
  background:var(--accent);
  color:#fff;
  font-weight:500;
}
.analytics-main{
  padding:26px 30px;
  min-height:420px;
}
.analytics-main h3{
  font-family:var(--font-text);
  font-weight:500;
  font-size:1.25rem;
  margin:0 0 6px;
}
.analytics-main .analytics-desc{
  font-size:0.85rem;
  color:var(--ink-soft);
  margin:0 0 20px;
  max-width:60ch;
  line-height:1.5;
}
.analytics-controls{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:20px;
}
.analytics-controls select, .analytics-controls button.seg{
  background:#fff;
  border:1px solid var(--rule);
  padding:6px 12px;
  font-size:0.82rem;
  border-radius:4px;
  font-family:var(--font-ui);
  cursor:pointer;
}
.analytics-controls button.seg.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.progress-wrap{
  max-width:420px;
  margin:60px auto;
  text-align:center;
}
.progress-track{
  height:8px;
  background:var(--rule);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:10px;
}
.progress-fill{
  height:100%;
  background:var(--accent);
  width:0%;
  transition:width 0.08s linear;
}
/* A wait whose length can't be measured: stripes that keep moving, so it
   never reads as a bar frozen at 100% (plan
   2026-10-02-upload-processing-failures.md §3). */
.progress-fill.is-working{
  background:repeating-linear-gradient(-45deg,
    var(--accent) 0 10px, var(--accent-soft) 10px 20px);
  background-size:28.28px 28.28px;
  animation:progressStripes 0.9s linear infinite;
}
@keyframes progressStripes{
  from{ background-position:0 0; }
  to{ background-position:28.28px 0; }
}
@media (prefers-reduced-motion: reduce){
  .progress-fill.is-working{ animation:none; }
}
.progress-fill.is-error{
  background:var(--error);
  animation:none;
}
.progress-label{
  font-size:0.8rem;
  color:var(--ink-faint);
}
.stat-row{
  display:flex;
  gap:24px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.stat-row .stat-block .num{
  font-family:var(--font-text);
  font-size:1.4rem;
  color:var(--accent);
  display:block;
}
.stat-row .stat-block .label{
  font-size:0.75rem;
  color:var(--ink-faint);
}
table.friction{
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
}
table.friction th{
  text-align:left;
  font-weight:500;
  color:var(--ink-soft);
  font-size:0.72rem;
  padding:6px 10px 8px 0;
  border-bottom:1px solid var(--rule);
  cursor:pointer;
  user-select:none;
}
table.friction td{
  padding:9px 10px 9px 0;
  border-bottom:1px solid #DDD8C9;
}
table.friction tr.friction-row{ cursor:pointer; }
table.friction tr.friction-row:hover{ background:var(--paper-raised); }
table.friction td.pct{
  font-variant-numeric:tabular-nums;
  color:var(--amber);
  font-weight:600;
}
.chart-svg text{
  font-family:var(--font-ui);
  fill:var(--ink-faint);
  font-size:10px;
}
.chart-svg .axis-line{ stroke:var(--rule); stroke-width:1; }
.chart-svg .data-line{ stroke:var(--accent); stroke-width:2; fill:none; }
.chart-svg .data-point{ fill:var(--accent); }
.chart-svg .data-bar{ fill:var(--accent); }
.chart-svg .grid-line{ stroke:#E4E0D4; stroke-width:1; }

.track-labels{
  font-size:0.68rem;
  color:var(--ink-faint);
  display:flex;
  justify-content:space-between;
  padding:2px 2px 0;
}
.month-heading{
  font-family:var(--font-text);
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink-soft);
  padding:22px 0 8px;
}

/* Conversation list / detail */
.split{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:0;
  border:1px solid var(--rule);
}
.conv-list{
  border-right:1px solid var(--rule);
  max-height:640px;
  overflow-y:auto;
  background:var(--paper-raised);
}
.conv-list input{
  width:100%;
  border:none;
  border-bottom:1px solid var(--rule);
  padding:11px 14px;
  font-family:var(--font-ui);
  font-size:0.88rem;
  background:var(--paper-raised);
  color:var(--ink);
}
.conv-list input:focus{outline:none; background:#fff;}
.conv-item{
  padding:11px 14px;
  border-bottom:1px solid #DDD8C9;
  cursor:pointer;
  font-size:0.86rem;
}
.conv-item:hover{background:var(--accent-soft);}
.conv-item.selected{background:var(--accent); color:#fff;}
.conv-item .meta{
  display:block;
  font-size:0.72rem;
  color:var(--ink-faint);
  margin-top:2px;
}
.conv-item.selected .meta{color:#DCE6E2;}
.detail{
  padding:24px 28px;
  min-height:400px;
}
.detail h3{
  font-family:var(--font-text);
  font-weight:500;
  font-size:1.3rem;
  margin:0 0 4px;
}
.detail .summary{
  font-size:0.85rem;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.placeholder{
  color:var(--ink-faint);
  font-size:0.9rem;
  padding:40px 0;
  text-align:center;
}
table.sessions{
  width:100%;
  border-collapse:collapse;
  font-size:0.86rem;
}
table.sessions th{
  text-align:left;
  font-weight:500;
  color:var(--ink-soft);
  font-size:0.75rem;
  padding:6px 10px 8px 0;
  border-bottom:1px solid var(--rule);
}
table.sessions td{
  padding:9px 10px 9px 0;
  border-bottom:1px solid #DDD8C9;
}
table.sessions td.dur{color:var(--amber); font-variant-numeric:tabular-nums;}
footer{
  margin-top:56px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:0.78rem;
  color:var(--ink-faint);
}
@media (max-width:760px){
  .split{grid-template-columns:1fr;}
  .conv-list{max-height:260px; border-right:none; border-bottom:1px solid var(--rule);}
  .day-row{grid-template-columns:70px 1fr;}
}

/* Hidden elements. The attribute is the page's one way of hiding something;
   !important so a class that sets `display` (e.g. .filter-banner) can't
   override it. */
[hidden]{ display:none !important; }

/* Explanatory text: smaller and quieter than body text. */
.hint{ font-size:0.82rem; color:var(--ink-faint); line-height:1.5; }
.hint.under-key{ margin-top:8px; }
.hint.inline{ margin:0; }
.hint.before-controls{ margin-bottom:16px; }
.hint.before-table{ margin-bottom:14px; }
.hint.before-chart{ margin-bottom:6px; }
.chart-block{ margin-bottom:28px; }

/* Status lines: quiet, red when they report an error. */
.load-status.is-error, .save-status.is-error{ color:var(--error); }
#cognitoLoginStatus{ margin:0 0 8px; }

/* The scan checkbox's label: box beside a two-part explanation. */
.load-checkbox-field label{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; }
.load-checkbox-field input{ margin-top:3px; }
.load-checkbox-field .opt{ display:block; margin-top:4px; }

/* Buttons in tight places. */
.btn-secondary.btn-small{ padding:4px 10px; }
.btn-primary.btn-compact{ padding:7px 14px; font-size:0.8rem; }
.btn-spaced{ margin-top:10px; margin-bottom:14px; }
.button-group{ display:flex; gap:8px; }

/* Things you can click that aren't buttons. */
.clickable{ cursor:pointer; }

/* Calendar's quarter-day grid lines and its last row. */
.grid-line.q1{ left:25%; }
.grid-line.q2{ left:50%; }
.grid-line.q3{ left:75%; }
.day-row.last{ border-bottom:none; }

/* Conversation detail. */
.detail .summary.with-flags{ display:flex; gap:14px; align-items:center; }
.review-link{ display:inline-block; margin-top:18px; font-size:0.85rem; color:var(--accent); }
.no-text{ color:var(--ink-faint); }

/* Lightweight Markdown in message text (ui/render/markup.js). */
.md-code{ background:var(--paper); padding:1px 4px; border-radius:3px; font-size:0.9em; }
.md-p{ margin:0 0 8px; }
.md-heading{ font-weight:600; margin:8px 0 4px; }
/* Sizes as before the move: 1.15rem less 0.08rem per level, never below 0.85rem. */
.md-heading.h1{ font-size:1.07rem; }
.md-heading.h2{ font-size:0.99rem; }
.md-heading.h3{ font-size:0.91rem; }
.md-heading.h4, .md-heading.h5, .md-heading.h6{ font-size:0.85rem; }
.md-list{ margin:2px 0 8px; padding-left:20px; }

/* Charts fill their column; points are clickable and slightly see-through. */
.chart-svg{ width:100%; height:auto; }
.chart-svg .scatter-point{ cursor:pointer; opacity:0.75; }

/* ---- The pages added by docs/plans/2026-10-05-screen-flow.md ---- */

/* Who is signed in, above every page but Sign-in. */
.account-bar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-bottom:18px;
}
#accountName{ color:var(--ink); }

.button-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:4px; }

/* The Upload page's chosen files, and its per-file lines under the bar. */
.file-list, .file-lines{ list-style:none; padding:0; margin:10px 0 0; font-size:0.82rem; }
.file-list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:5px 0;
  border-bottom:1px solid var(--rule);
}
.file-list .size{ color:var(--ink-faint); margin-left:auto; }
.file-lines li{ padding:4px 0; color:var(--ink-soft); }
.file-lines li.is-error{ color:var(--error); }

/* The loading modal: a box in front of a dimmed page that takes no clicks. */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(36, 34, 29, 0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.modal{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:26px 28px;
  width:min(460px, 90vw);
  box-shadow:0 10px 30px rgba(36, 34, 29, 0.25);
}
.modal h2{
  font-family:var(--font-text);
  font-weight:500;
  font-size:1.35rem;
  margin:0 0 14px;
}

/* The Describe page. */
.filter-banner.reminder{ display:block; }
.reminder ul{ margin:4px 0 0; padding-left:18px; }
.describe-section{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:20px 24px;
  margin-bottom:18px;
}
.describe-section h3{
  font-family:var(--font-text);
  font-weight:500;
  font-size:1.15rem;
  margin:0 0 4px;
}
.describe-section .counts{ font-size:0.8rem; color:var(--ink-faint); margin:0 0 14px; }
.describe-field{ margin-bottom:16px; }
.describe-field > .field-label{ display:block; font-size:0.85rem; color:var(--ink-soft); margin-bottom:6px; }
.participant-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.participant-row select, .participant-row input, .describe-field select, .describe-field input[type="text"],
.describe-field input[type="datetime-local"]{
  font-family:var(--font-ui);
  font-size:0.85rem;
  padding:6px 8px;
  border:1px solid var(--rule);
  border-radius:4px;
  background:#fff;
  color:var(--ink);
}
.medium-choice{ display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; font-size:0.85rem; cursor:pointer; }
.medium-choice input{ margin-top:3px; accent-color:var(--accent); }
.medium-choice .explain{ display:block; color:var(--ink-faint); font-size:0.78rem; }
.field-error{ display:block; color:var(--error); font-size:0.78rem; margin-top:4px; }
.varies{ color:var(--amber); font-size:0.8rem; }
.span-fields{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.describe-section details{ font-size:0.82rem; margin-top:8px; }
.describe-section details ul{ margin:6px 0 0; padding-left:18px; color:var(--ink-soft); }
.separate-toggle{ margin-bottom:16px; }

/* The Files tab. */
table.files{ width:100%; border-collapse:collapse; font-size:0.85rem; }
table.files th{
  text-align:left;
  font-weight:500;
  color:var(--ink-soft);
  font-size:0.72rem;
  padding:6px 10px 8px 0;
  border-bottom:1px solid var(--rule);
}
table.files td{ padding:9px 10px 9px 0; border-bottom:1px solid #DDD8C9; vertical-align:top; }
table.files .meta{ display:block; font-size:0.72rem; color:var(--ink-faint); }

/* A conversation's details, above its sessions in the Conversations tab. */
.conv-details{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-bottom:16px;
}

/* A table's own title, such as "Sessions" in the Conversations tab. */
.table-title{
  font-family:var(--font-text);
  font-weight:500;
  font-size:1.05rem;
  margin:0 0 6px;
}


/* Bars that sit under a table or a button, not in an empty panel: the
   Review search, the annotated download, a conversation's files (plan
   docs/plans/2026-10-06-load-only-what-the-page-shows.md §8b). */
#reviewProgress, #exportProgress, .conv-files .progress-wrap{ margin:14px 0; max-width:none; text-align:left; }

/* A note left where a replaced branch was pruned (§4d): a row of its own,
   quieter than a message, with a rule down its side. */
tr.note-row td{
  font-family:var(--font-text);
  font-style:italic;
  font-size:0.85rem;
  color:var(--ink-soft);
  border-left:3px solid var(--amber);
  background:var(--amber-soft);
  padding:8px 14px;
}

/* Citations (§4c): a small number after the cited words. */
sup.cite{ font-size:0.68rem; line-height:0; margin-left:1px; color:var(--amber); }
sup.cite a{ color:var(--amber); text-decoration:none; border-bottom:1px dotted var(--amber); }
sup.cite a:hover{ color:var(--ink); }

/* A file's card, in its place in a message (§4): a folded corner marks it
   as a file, not a button like the others. */
.file-cards{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.file-card{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  margin:6px 8px 6px 0;
  padding:8px 26px 8px 12px;
  min-width:160px;
  max-width:320px;
  text-align:left;
  font-family:var(--font-ui);
  background:var(--paper);
  border:1px solid var(--rule);
  border-left:3px solid var(--amber);
  border-radius:3px;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.file-card::after{
  content:'';
  position:absolute;
  top:-1px; right:-1px;
  border-width:0 12px 12px 0;
  border-style:solid;
  border-color:var(--paper-raised) var(--paper-raised) var(--amber-soft) var(--amber-soft);
}
.file-card:hover:not([disabled]){ transform:translateY(-1px); box-shadow:0 3px 8px rgba(36, 34, 29, 0.12); }
.file-card[disabled]{ cursor:default; opacity:0.75; border-left-color:var(--rule); }
.file-card-name{ font-size:0.82rem; font-weight:600; color:var(--ink); word-break:break-word; }
.file-card-kind{ font-size:0.7rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; }
.file-card-note{ font-size:0.72rem; color:var(--amber); font-style:italic; }
@media (prefers-reduced-motion: reduce){ .file-card{ transition:none; } }

/* The open conversation's files and its branches. */
.file-index{ list-style:none; margin:0; padding:0; }
.file-index li{ padding:6px 0; border-bottom:1px solid var(--rule); }
.file-index .meta{ display:block; font-size:0.75rem; color:var(--ink-faint); }
.conv-branches{ font-size:0.82rem; color:var(--ink-soft); margin:6px 0 10px; }

/* Describe's warning about messages of unknown time (§4e). */
.untimed-warning{
  font-size:0.85rem;
  color:var(--ink);
  background:var(--amber-soft);
  border-left:3px solid var(--amber);
  padding:8px 12px;
  margin:0 0 14px;
}

/* The file viewer: wider than the loading modal, its body scrolling. */
.modal.file-modal{ width:min(960px, 94vw); max-height:90vh; display:flex; flex-direction:column; }
.file-modal-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px; margin-bottom:12px; }
.file-modal-head h2{ margin:0; word-break:break-word; }
.file-modal-note{ font-size:0.8rem; color:var(--ink-faint); flex:1; }
.file-modal-head a.btn-secondary{ text-decoration:none; display:inline-block; }
.file-modal-body{ overflow:auto; min-height:120px; }
.file-image{ max-width:100%; background:#fff; border:1px solid var(--rule); }
.file-frame{ width:100%; height:65vh; border:1px solid var(--rule); background:#fff; }
.file-code, .file-text{ margin:0; padding:12px 14px; font-size:0.8rem; line-height:1.45; white-space:pre-wrap; word-break:break-word; border:1px solid var(--rule); border-radius:3px; }
.file-text{ background:var(--paper); }
.file-markdown{ font-family:var(--font-text); line-height:1.55; }