/* ============================================================================
   સહભાવ · સાધનો

   Colours, type and feel are taken from sahbhav.org so this reads as part of
   the same organisation rather than a separate tool: warm cream ground, the
   Sahbhav orange for anything that acts, Cormorant Garamond for the name,
   DM Sans for the interface, Noto Sans Gujarati for everything a person reads.

   The person this is built for finds typing Gujarati slow and painful. So the
   transcript is set large and generously leaded, the record button is the
   biggest thing on the screen, and copying is one tap.
   ========================================================================= */

:root {
  color-scheme: light;

  --paper:      #FAF5EE;   /* page ground                     */
  --card:       #FFFFFF;   /* transcript cards, drawer        */
  --sand:       #F0E6D3;   /* recessed: inputs, segmented     */
  --sand-line:  #D4C5B0;   /* hairlines                       */

  --orange:     #E8721C;   /* the one colour that acts        */
  --orange-dk:  #D4650F;
  --gold:       #C8A951;
  --green:      #4A7C59;
  --red:        #C0392B;

  --ink:        #2C1810;   /* headings, transcript            */
  --ink-2:      #8B6F47;   /* secondary                       */
  --ink-3:      #A2907A;   /* faint labels                    */

  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-ui:      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-read:    "Noto Sans Gujarati", "Noto Sans Devanagari", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --shadow-card: 0 1px 2px #2c181008, 0 8px 24px -16px #2c181040;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
body { display: flex; flex-direction: column; }

.screen { display: flex; flex-direction: column; flex: 1; min-height: 0; }
[hidden] { display: none !important; }

.display { font-family: var(--f-display); font-weight: 600; letter-spacing: .01em; }

/* ------------------------------------------------------------------- login */

#login {
  align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 32px) 26px calc(var(--safe-b) + 32px);
}
.login-box { width: 100%; max-width: 360px; text-align: center; }

.mark {
  width: 66px; height: 66px; margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--sand-line);
  display: grid; place-items: center;
  box-shadow: var(--shadow-card);
}
.mark span {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 6px #e8721c1f;
}

h1.display { margin: 0; font-size: 40px; line-height: 1.1; color: var(--ink); }

.tagline {
  margin: 10px 0 34px;
  font-family: var(--f-read); font-size: 14.5px; color: var(--ink-2);
}

.field { display: block; margin-bottom: 15px; text-align: left; }
.field-label {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}

input[type=text], input[type=password], .text-input {
  width: 100%; padding: 14px 15px;
  background: var(--card);
  border: 1px solid var(--sand-line);
  border-radius: 11px;
  color: var(--ink);
  font-family: var(--f-ui); font-size: 16px;   /* 16px stops iOS zooming on focus */
}
input:focus, .text-input:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px #e8721c26;
}

.btn-primary {
  width: 100%; margin-top: 10px; padding: 16px;
  background: var(--orange); border: 0; border-radius: 11px;
  color: #fff; font-family: var(--f-ui);
  font-size: 15px; font-weight: 500; letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px #e8721cb0;
  transition: background .14s ease, transform .08s ease;
}
.btn-primary:active { background: var(--orange-dk); transform: translateY(1px); }
.btn-primary[disabled] { opacity: .55; }

.btn-ghost {
  width: 100%; margin-top: 8px; padding: 13px;
  background: none; border: 1px solid var(--sand-line); border-radius: 10px;
  color: var(--ink-2); font-family: var(--f-ui); font-size: 13px; cursor: pointer;
}

.error {
  margin: 14px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--red); font-family: var(--f-read);
}

/* -------------------------------------------------------------------- rail */

.rail {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-t) + 13px) 18px 13px;
  background: var(--paper);
  border-bottom: 1px solid var(--sand-line);
  flex: none;
}
.rail-left { display: flex; align-items: center; gap: 11px; }
.rail-title { font-size: 21px; color: var(--ink); }

.lamp {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sand-line); flex: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.lamp[data-state="ready"] { background: var(--green); }
.lamp[data-state="live"]  { background: var(--red); box-shadow: 0 0 0 4px #c0392b26;
                            animation: pulse 1.1s ease-in-out infinite; }
.lamp[data-state="work"]  { background: var(--gold); }
@keyframes pulse { 50% { opacity: .3; } }

.rail-btn {
  background: none; border: 1px solid var(--sand-line); border-radius: 9px;
  color: var(--ink-2); font-family: var(--f-ui);
  font-size: 13px; padding: 8px 13px; cursor: pointer;
}
.rail-btn[aria-expanded="true"] { color: var(--orange); border-color: var(--orange); }

/* ------------------------------------------------------------------ drawer */

.drawer {
  background: var(--card); border-bottom: 1px solid var(--sand-line);
  padding: 20px 18px 24px; flex: none;
  max-height: 62vh; overflow-y: auto;
}
.setting { margin-bottom: 22px; }
.setting-label {
  display: block; margin-bottom: 10px;
  font-family: var(--f-read); font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.hint {
  margin: 9px 0 0; font-family: var(--f-read);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
}

.segmented {
  display: flex; gap: 4px; padding: 4px;
  background: var(--sand); border-radius: 11px;
}
.segmented button {
  flex: 1; padding: 11px 6px;
  background: none; border: 0; border-radius: 8px;
  color: var(--ink-2); cursor: pointer;
  font-family: var(--f-read); font-size: 13.5px;
  transition: background .15s ease, color .15s ease;
}
.segmented button.on {
  background: var(--card); color: var(--ink); font-weight: 500;
  box-shadow: 0 1px 3px #2c181014;
}

/* ------------------------------------------------------------------- sheet */

.sheet {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 18px 10px;
}

.empty { padding: 46px 4px; text-align: center; }
.empty-big {
  margin: 0 0 9px; font-family: var(--f-read);
  font-size: 19px; color: var(--ink-2);
}
.empty-small { margin: 0; font-family: var(--f-read); font-size: 14px; color: var(--ink-3); }

.take {
  background: var(--card);
  border: 1px solid var(--sand-line);
  border-radius: 16px;
  padding: 18px 18px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  animation: rise .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.take-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.take-badge { color: var(--gold); }

/* The reason the app exists. Everything else is sized so this can be big. */
.take-text {
  margin: 0;
  font-family: var(--f-read);
  font-size: 22px; line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap; word-wrap: break-word;
  -webkit-user-select: text; user-select: text;
}
.take.pending .take-text { color: var(--ink-3); }

.take-actions { display: flex; gap: 9px; margin-top: 16px; }
.take-actions button {
  flex: 1; padding: 12px;
  background: var(--sand); border: 0; border-radius: 10px;
  color: var(--ink); font-family: var(--f-ui); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .14s ease;
}
.take-actions button:active { background: var(--sand-line); }
.take-actions button.done { background: var(--green); color: #fff; }

/* --------------------------------------------------------------- transport */

.transport {
  flex: none;
  background: var(--paper);
  border-top: 1px solid var(--sand-line);
  padding: 16px 16px calc(var(--safe-b) + 20px);
  display: flex; flex-direction: column; align-items: center;
}

.readout { display: flex; align-items: baseline; gap: 13px; margin-bottom: 14px; }
.timecode {
  font-family: var(--f-display); font-size: 30px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.status { font-family: var(--f-read); font-size: 13px; color: var(--ink-3); }

.record-wrap { position: relative; width: 164px; height: 164px; display: grid; place-items: center; }
.meter { position: absolute; inset: 0; pointer-events: none; }

.record {
  position: relative;
  width: 124px; height: 124px; border-radius: 50%;
  background: var(--orange);
  border: 0;
  box-shadow: 0 10px 26px -10px #e8721cc0, inset 0 -2px 6px #00000018;
  display: grid; place-items: center;
  cursor: pointer;
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  transition: transform .1s cubic-bezier(.2,.7,.3,1), background .14s ease;
}
/* The tap target reaches past the circle; a thumb is bigger than it looks. */
.record::before { content: ""; position: absolute; inset: -20px; border-radius: 50%; }
.record:active { transform: scale(.955); background: var(--orange-dk); }
.record[disabled] { background: var(--sand-line); box-shadow: none; cursor: default; }

/* The glyph's shape IS the state machine — no icon swapping. */
.record-glyph {
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff;
  transition: width .24s cubic-bezier(.2,.7,.3,1),
              height .24s cubic-bezier(.2,.7,.3,1),
              border-radius .24s cubic-bezier(.2,.7,.3,1);
}
.record[data-state="recording"] .record-glyph { width: 28px; height: 28px; border-radius: 6px; }
.record[data-state="working"] .record-glyph {
  width: 24px; height: 24px;
  animation: breathe .9s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .35; transform: scale(.84); } }

.transport-hint {
  margin: 15px 0 0; font-family: var(--f-read);
  font-size: 13px; color: var(--ink-3);
}

/* ------------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 26px);
  max-width: 88vw;
  background: var(--ink); color: #FAF5EE;
  border-radius: 12px; padding: 13px 17px;
  font-family: var(--f-read); font-size: 13.5px; line-height: 1.55;
  box-shadow: 0 12px 30px -12px #2c1810a0;
  z-index: 40;
  animation: rise .26s cubic-bezier(.2,.7,.3,1);
}

/* ----------------------------------------------------------------- desktop */

@media (min-width: 720px) {
  #app, #home, #yt { max-width: 640px; margin: 0 auto; width: 100%;
         border-left: 1px solid var(--sand-line); border-right: 1px solid var(--sand-line); }
  .take-text { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------- start / pause / stop */

/* Three columns keep the record button optically centred whether or not the
   side controls are showing. */
.controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%; max-width: 340px;
}
.ctrl-slot { display: grid; place-items: center; }

.ctrl {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--sand-line);
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform .1s ease, background .14s ease, color .14s ease;
  animation: rise .22s cubic-bezier(.2,.7,.3,1);
}
.ctrl:active { transform: scale(.94); background: var(--sand); }
.ctrl-stop { color: var(--red); }

/* The glyph shape is the state: dot to record, bars to pause, triangle to
   resume. Swapped in JS rather than animated, because the meaning has to be
   unmistakable at a glance. */
.record-glyph.is-bars {
  width: 30px; height: 30px; border-radius: 0; background: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
}
.record-glyph.is-bars::before, .record-glyph.is-bars::after {
  content: ""; background: #fff; border-radius: 3px;
}
.record-glyph.is-play {
  width: 0; height: 0; border-radius: 0; background: none;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 28px solid #fff;
  margin-left: 7px;
}
.record[data-state="paused"] { background: var(--gold); box-shadow: 0 10px 26px -10px #c8a951c0; }
.record[data-state="paused"]:active { background: #b8983f; }

.take.failed { border-color: #e8721c66; background: #fffaf4; }
.take.failed .take-text { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.take.failed .take-time { color: var(--orange); }

/* -------------------------------------------------------------------- tabs */

.tabs {
  display: flex; gap: 4px; flex: none;
  padding: 10px 16px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--sand-line);
}
.tab {
  flex: 1; padding: 11px 8px 13px;
  background: none; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3); cursor: pointer;
  font-family: var(--f-read); font-size: 15px;
  transition: color .15s ease, border-color .15s ease;
}
.tab.on { color: var(--orange); border-bottom-color: var(--orange); font-weight: 500; }

/* ----------------------------------------------------------------- history */

.day-head {
  position: sticky; top: 0; z-index: 2;
  margin: 0 -18px 10px; padding: 10px 18px 8px;
  background: var(--paper);
  font-family: var(--f-read); font-size: 13px; font-weight: 500;
  color: var(--ink-3); letter-spacing: .02em;
}
.day-head:not(:first-child) { margin-top: 18px; }

.entry {
  background: var(--card);
  border: 1px solid var(--sand-line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}

.entry-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

/* The title is a real input so it can be typed into directly — no edit mode,
   no pencil icon, no second tap. */
.entry-title {
  flex: 1; min-width: 0;
  background: none; border: 0; padding: 2px 0;
  font-family: var(--f-read); font-size: 15px; font-weight: 500; color: var(--ink);
  border-bottom: 1px dashed transparent;
}
.entry-title::placeholder { color: var(--ink-3); font-weight: 400; font-style: italic; }
.entry-title:hover { border-bottom-color: var(--sand-line); }
.entry-title:focus {
  outline: none; border-bottom-color: var(--orange);
}
.entry-time { font-size: 12px; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }

.entry-text {
  margin: 0; font-family: var(--f-read);
  font-size: 16px; line-height: 1.7; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.entry.open .entry-text {
  -webkit-line-clamp: unset; overflow: visible;
  font-size: 19px; color: var(--ink);
  -webkit-user-select: text; user-select: text;
}

.entry-actions { display: flex; gap: 8px; margin-top: 12px; }
.entry-actions button {
  padding: 9px 14px;
  background: var(--sand); border: 0; border-radius: 9px;
  color: var(--ink); font-family: var(--f-ui); font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
.entry-actions button.done { background: var(--green); color: #fff; }
.entry-actions .danger { color: var(--red); background: none; margin-left: auto; }

/* ============================================================ tools shell */

/* Module screens name the module in the reading face; only the home screen
   carries the Sahbhav wordmark. */
.rail-title:not(.display) {
  font-family: var(--f-read); font-size: 16.5px; font-weight: 500;
}

.back {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin: -6px -2px -6px -8px;
  border-radius: 50%; color: var(--ink-2);
}
.back:active { background: var(--sand); }

/* -------------------------------------------------------------------- home */

.home { padding-top: 26px; }
.home-lead {
  margin: 0 2px 16px; font-family: var(--f-read);
  font-size: 15px; color: var(--ink-3);
}

.module {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 18px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--sand-line); border-radius: 18px;
  box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none;
  transition: transform .1s ease, border-color .14s ease;
}
.module:active { transform: scale(.985); border-color: var(--orange); }

.module-icon {
  flex: none; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; color: #fff;
}
.module-icon.is-voice { background: var(--orange); box-shadow: 0 8px 18px -10px #e8721cc0; }
.module-icon.is-yt    { background: var(--red);    box-shadow: 0 8px 18px -10px #c0392bc0; }

.module-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.module-title { font-family: var(--f-read); font-size: 19px; font-weight: 600; color: var(--ink); }
.module-en {
  margin-top: 2px; font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.module-desc {
  margin-top: 8px; font-family: var(--f-read);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
.module-go { flex: none; font-size: 28px; line-height: 1; color: var(--sand-line); }

/* ------------------------------------------------------------ youtube form */

.yt-form { margin-bottom: 18px; }
.yt-form .setting-label { margin-bottom: 9px; }
.yt-input-row { display: flex; gap: 8px; }
.yt-input-row .text-input { flex: 1; min-width: 0; }
.yt-paste {
  flex: none; padding: 0 16px;
  background: var(--sand); border: 0; border-radius: 11px;
  color: var(--ink); font-family: var(--f-read); font-size: 14px; cursor: pointer;
}
.yt-paste:active { background: var(--sand-line); }
.yt-form .hint { margin-top: 12px; }

/* ------------------------------------------------------------- youtube card */

.yt-card {
  background: var(--card); border: 1px solid var(--sand-line); border-radius: 16px;
  padding: 16px; margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  animation: rise .3s cubic-bezier(.2,.7,.3,1);
}

.yt-head { display: flex; gap: 13px; align-items: flex-start; }
.yt-thumb {
  flex: none; width: 112px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 9px; background: var(--sand);
}
.yt-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* Outranks the generic text-input box: the title reads as a heading that
   happens to be editable, as in the voice history. */
.yt-card input.yt-title {
  width: 100%; padding: 2px 0;
  background: none; border: 0; border-bottom: 1px dashed transparent; border-radius: 0;
  font-family: var(--f-read); font-size: 15.5px; font-weight: 500; line-height: 1.45;
}
.yt-card input.yt-title:hover { border-bottom-color: var(--sand-line); }
.yt-card input.yt-title:focus { box-shadow: none; border-bottom-color: var(--orange); }
.yt-author { font-size: 12.5px; color: var(--ink-3); }
.yt-open { margin-top: 3px; font-size: 12.5px; color: var(--orange-dk); text-decoration: none; }

.yt-status {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 11px 13px;
  background: var(--paper); border-radius: 11px;
  font-family: var(--f-read); font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.yt-status-text { flex: 1; font-variant-numeric: tabular-nums; }
.yt-status[data-tone="good"] { color: var(--green); }
.yt-status[data-tone="warn"] { color: var(--orange-dk); }
.yt-status[data-tone="bad"]  { color: var(--red); background: #fdf1ef; }
.yt-stop {
  flex: none; padding: 7px 13px;
  background: var(--card); border: 1px solid var(--sand-line); border-radius: 8px;
  color: var(--red); font-family: var(--f-read); font-size: 13px; cursor: pointer;
}

.yt-note {
  margin: 10px 2px 0; font-family: var(--f-read);
  font-size: 13px; line-height: 1.55; color: var(--orange-dk);
}

/* The three languages. Each tab carries its own state: a dot while it is
   being written, progress while it translates, a tick when done. */
.yt-langs {
  display: flex; gap: 4px; padding: 4px; margin-top: 14px;
  background: var(--sand); border-radius: 12px;
}
.yt-lang {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 6px;
  background: none; border: 0; border-radius: 9px;
  color: var(--ink-2); cursor: pointer;
  font-family: var(--f-read); font-size: 14.5px;
  transition: background .15s ease, color .15s ease;
}
.yt-lang.on { background: var(--card); color: var(--ink); font-weight: 500; box-shadow: 0 1px 3px #2c181014; }
.yt-lang[disabled] { cursor: default; opacity: .6; }

.yt-mark { font-size: 10.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.yt-mark[data-kind="busy"]   { color: var(--gold); animation: pulse 1.1s ease-in-out infinite; }
.yt-mark[data-kind="good"]   { color: var(--green); }
.yt-mark[data-kind="bad"]    { color: var(--red); }
.yt-mark[data-kind="source"] {
  padding: 2px 6px; border-radius: 6px;
  background: #e8721c1f; color: var(--orange-dk); font-size: 10px;
}

.yt-panel { margin-top: 14px; }
.yt-panel-note {
  margin: 0 2px 12px; font-family: var(--f-read);
  font-size: 13px; line-height: 1.55; color: var(--ink-3);
}
.yt-panel-note[data-tone="bad"] { color: var(--red); }

/* What the module is for: set large and generously leaded, like a take. */
.yt-text {
  font-family: var(--f-read);
  font-size: 19px; line-height: 1.8; color: var(--ink);
  white-space: pre-wrap; word-wrap: break-word;
  -webkit-user-select: text; user-select: text;
}

.take-actions button.primary { background: var(--orange); color: #fff; }

.yt-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.yt-foot:empty { display: none; }
.yt-delete {
  align-self: flex-end; padding: 9px 4px;
  background: none; border: 0;
  color: var(--red); font-family: var(--f-ui); font-size: 12.5px; cursor: pointer;
}

/* ---------------------------------------------------------- youtube history */

.yt-item {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 11px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--sand-line); border-radius: 14px;
  box-shadow: var(--shadow-card);
  text-align: left; cursor: pointer; color: inherit;
}
.yt-item:active { border-color: var(--orange); }
.yt-item-thumb {
  flex: none; width: 92px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px; background: var(--sand);
}
.yt-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.yt-item-title {
  font-family: var(--f-read); font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-item-meta { font-size: 12px; color: var(--ink-3); font-family: var(--f-read); }
.yt-item-meta[data-tone="busy"] { color: var(--orange-dk); }
.yt-item-meta[data-tone="bad"]  { color: var(--red); }

/* The newest video sits under the link box, which stays open for the next. */
#yt-job:not(:empty) { margin-top: 4px; }

.yt-back {
  margin: 0 0 12px -4px; padding: 6px 4px;
  background: none; border: 0;
  color: var(--orange-dk); font-family: var(--f-read); font-size: 14.5px; cursor: pointer;
}

@media (min-width: 720px) {
  .yt-thumb { width: 150px; }
  .yt-text { font-size: 20px; }
}