/* ==========================================================================
   app-truman.css — the study, and the site the study is running.

   Two registers on the same paper. The consent form and the debrief keep the
   machine's furniture — beveled panels, the mono protocol number, the rule
   between sections — because they are lab software and should look it. The
   feed between them drops all of it for hairlines and soft rows, because it
   is pretending to be somewhere else. The moment the bevels come back is the
   moment the pretence is dropped, so nothing here should soften either side
   toward the other.

   Every tint is mixed against --paper, which lain.css warms to #f3ece0. Any
   near-white borrowed from a real social platform reads as a hole in the
   screen here; when adding one, go darker than paper, never lighter.
   ========================================================================== */

/* -------------------------------------------------------------- the stage */
.tru-stage {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; direction: rtl;
  background: var(--paper);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  scrollbar-width: thin; scrollbar-color: var(--gray-dk) var(--gray-lt);
}
.tru-stage > * { direction: ltr; }
.tru-stage::-webkit-scrollbar { width: 14px; }
.tru-stage::-webkit-scrollbar-track { background: var(--gray-lt); }
.tru-stage::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-top: 1px solid var(--hi); border-left: 1px solid var(--hi);
  border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo);
}

.tru-shelf .tru-proto,
.tru-shelf .tru-brand {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
}
.tru-shelf .tru-brand { font-size: 13px; letter-spacing: .16em; text-transform: lowercase; }
.tru-small { font-size: 10.5px; }
.tru-shelf .btn.tru-fin { font-size: 11px; padding: 4px 9px; }

/* ------------------------------------------------------------- act one */
.tru-consent { max-width: 60ch; padding: 18px 22px 26px; }
.tru-consent h1 { font-size: 15px; margin: 0 0 3px; }
.tru-consent .tru-formver {
  font-family: var(--mono); font-size: 10.5px; color: var(--lo);
  margin: 0 0 4px;
}
.tru-consent p { font-size: 12.5px; line-height: 1.6; margin: 0 0 11px; }
.tru-agree {
  display: flex; align-items: flex-start; gap: 2px;
  font-size: 12.5px; line-height: 1.5;
  padding: 7px 9px;
  background: var(--gray-lt);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
  cursor: pointer;
}
.tru-agree input { margin: 2px 6px 0 0; flex: 0 0 auto; }
.tru-begin { margin: 12px 0 10px; }
.tru-begin .btn[disabled] { opacity: .45; cursor: default; }

/* ----------------------------------------------------------------- feed */
.tru-feed { padding: 0 0 4px; }
.tru-post {
  padding: 11px 14px 9px;
  border-bottom: 1px solid #ddd5c5;
  background: var(--paper);
}

.tru-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.tru-av {
  flex: 0 0 22px; width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  font-family: var(--mono); font-size: 9px; color: rgba(0,0,0,.62);
  border-radius: 3px;
}
.tru-avyou { color: rgba(255,255,255,.85); }
.tru-name { font-size: 12.5px; font-weight: bold; }
.tru-handle { font-size: 11.5px; color: #726b5e; }
.tru-when { font-size: 11px; color: #8a8375; margin-left: auto; }

.tru-body { font-size: 13px; line-height: 1.5; margin: 0 0 7px; }

.tru-picwrap {
  display: inline-block; max-width: 100%;
  margin: 0 0 8px;
  background: #eae2d2;
  border: 1px solid #d5cdbc;
  padding: 6px;
}
.tru-pic { display: block; width: 268px; max-width: 100%; height: auto; opacity: .78; }

.tru-link {
  margin: 0 0 8px; padding: 7px 9px;
  border: 1px solid #d9d1c1; background: #efe8da;
  max-width: 38em;
}
.tru-lt { font-size: 12px; font-weight: bold; }
.tru-lb { font-size: 11.5px; line-height: 1.45; color: #4e483e; margin: 2px 0 3px; }
.tru-ls { font-family: var(--mono); font-size: 10px; color: #857e70; }

.tru-acts { display: flex; gap: 3px; flex-wrap: wrap; }
.tru-act {
  font-family: var(--ui); font-size: 11px; line-height: 1;
  padding: 4px 7px;
  background: transparent; color: #665f52;
  border: 1px solid transparent;
  cursor: pointer;
}
.tru-act:hover { background: #e8e0d0; border-color: #d5cdbc; color: var(--ink); }
.tru-act:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
.tru-act.on { color: var(--ink); background: #ded5c1; border-color: #b9b0a0; }
.tru-gl { font-size: 11px; }
.tru-ct { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- thread */
.tru-thread {
  margin: 8px 0 0 14px;
  border-left: 2px solid #ddd5c5;
  padding-left: 11px;
}
.tru-reply { padding: 7px 0 6px; border-bottom: 1px solid #e4dccc; }
.tru-reply:last-of-type { border-bottom: 0; }
.tru-rhead { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.tru-reply .tru-av { flex: 0 0 16px; width: 16px; height: 16px; font-size: 7.5px; }
.tru-reply .tru-name { font-size: 11.5px; }
.tru-reply .tru-handle { font-size: 11px; }
.tru-reply p { font-size: 12.5px; line-height: 1.45; margin: 0 0 2px; }
.tru-ract { font-size: 10.5px; color: #8a8375; }
.tru-reply.tru-author p { color: #2e2a24; }
.tru-reply.tru-support { border-left: 2px solid #7d9470; margin-left: -13px; padding-left: 11px; }
.tru-reply.tru-mine { border-left: 2px solid var(--lo); margin-left: -13px; padding-left: 11px; }

/* a reply that lands while you are reading should be noticed and then stop
   being noticeable — it is not an alert, it is a thread growing */
.tru-new { animation: tru-land .5s ease-out; }
@keyframes tru-land {
  from { background: #e3d9c3; }
  to   { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .tru-new { animation: none; } }

/* ------------------------------------------------------------ composer */
.tru-composer { padding: 9px 0 4px; }
.tru-crow { display: flex; align-items: flex-start; gap: 6px; }
.tru-ta {
  flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; line-height: 1.4;
  resize: none;
}
.btn.tru-send { flex: 0 0 auto; font-size: 11px; padding: 5px 10px; }

/* the norm cue. Furniture, not a message: it is styled like a field hint,
   which is exactly how a real platform would ship it and exactly why it is
   worth testing. */
.tru-norm {
  margin: 5px 0 0 22px;
  padding: 5px 8px;
  font-size: 11.5px; line-height: 1.45;
  color: #38332b;
  background: #e9e1d0;
  border-left: 2px solid var(--gray-dk);
}
.tru-normlabel {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .09em; color: #645d50;
}

.tru-end { padding: 18px 14px 24px; text-align: center; }
.tru-end p { margin: 0 0 9px; font-size: 11.5px; }

/* ---------------------------------------------------------- act three */
.tru-debrief { max-width: 62ch; padding: 18px 22px 28px; }
.tru-debrief h1 { font-size: 16px; margin: 0 0 10px; }
.tru-debrief h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--lo); margin: 16px 0 7px;
}
.tru-debrief h3.tru-h3b { margin-top: 20px; }
.tru-debrief p { font-size: 12.5px; line-height: 1.6; margin: 0 0 11px; }
.tru-debrief p.tru-lead { font-size: 13px; }
.tru-debrief p.tru-armline {
  padding: 8px 10px;
  background: var(--gray-lt);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
}

/* the four screens, as furniture rather than as illustration */
.tru-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 10px 0 6px;
}
.tru-dg { margin: 0; }
.dg-box {
  padding: 6px; height: 88px;
  background: #eae2d2;
  border: 1px solid #c6bda9;
  display: flex; flex-direction: column; gap: 3px;
}
.tru-dg.dg-mine .dg-box { border: 2px solid var(--ink); padding: 5px; }
.dg-post, .dg-rep, .dg-norm { display: flex; flex-direction: column; gap: 2px; }
.dg-post { padding-bottom: 3px; border-bottom: 1px solid #d3cab6; margin-bottom: 2px; }
.dg-post i { height: 4px; background: #ada492; }
.dg-post i:first-child { width: 46%; background: #837b6c; }
.dg-rep { margin-left: 9px; }
.dg-rep i { height: 3px; width: 78%; background: #c2b9a6; }
.dg-field { height: 13px; background: #f8f4ea; border: 1px solid #b8af9c; margin-top: auto; }
.dg-norm { margin: 0 0 0 9px; }
.dg-norm i { height: 3px; width: 88%; background: #c2b9a6; }
.dg-on i { background: #4a463f; }
.dg-on { border-left: 2px solid #4a463f; padding-left: 5px; }
.tru-dg figcaption {
  font-size: 10.5px; line-height: 1.4; color: var(--lo);
  margin-top: 4px;
}
.tru-dg figcaption b { color: var(--ink); }
.dg-flag {
  display: inline-block; margin-left: 4px; padding: 0 4px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--ink); color: var(--paper);
}

/* the record */
table.tru-rec { width: 100%; border-collapse: collapse; margin: 4px 0 12px; }
table.tru-rec td {
  font-size: 11.5px; line-height: 1.45;
  padding: 3px 6px 3px 0;
  border-bottom: 1px solid #ded6c6;
  vertical-align: top;
}
table.tru-rec td.k {
  width: 15em; color: var(--lo);
  font-family: var(--mono); font-size: 10.5px;
  padding-right: 12px;
}

.tru-quote {
  margin: 0 0 11px; padding: 8px 11px;
  background: #eae2d2;
  border-left: 3px solid var(--lo);
}
.tru-quote p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; }
.tru-quote cite {
  font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--lo);
}

dl.tru-effects { margin: 6px 0 12px; }
dl.tru-effects dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink); margin: 10px 0 3px;
}
dl.tru-effects dd { margin: 0; font-size: 12.5px; line-height: 1.55; }

.tru-obs { margin-top: 16px; }
.tru-inline {
  font-family: var(--ui); font-size: 12px;
  background: none; border: 0; padding: 0;
  color: #0d2f8f; text-decoration: underline; cursor: pointer;
}
.tru-inline:hover { color: var(--ink); }

ol.tru-cites { margin: 4px 0 12px; padding-left: 18px; }
ol.tru-cites li { font-size: 11.5px; line-height: 1.5; margin: 0 0 8px; }
.tru-cauth { color: #35302a; }
.tru-ctitle { font-style: italic; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 520px) {
  .tru-consent, .tru-debrief { padding: 14px 13px 22px; }
  .tru-post { padding: 10px 11px 8px; }
  .tru-grid { grid-template-columns: minmax(0, 1fr); }
  .dg-box { height: 72px; }
  table.tru-rec td.k { width: 10em; font-size: 10px; }
  .tru-crow { flex-wrap: wrap; }
  .btn.tru-send { margin-left: 22px; }
  .tru-thread { margin-left: 6px; }
}