/* Fokus focused reader — the calm "paper letter" reply card.
   Redesign (2026-06-28): ONE calm sheet read top-to-bottom like a letter. The earlier
   "premium pass" had grouped the sender quote, the Fra/Til/Emne metadata, and the reply
   into three separate filled/bordered boxes — boxes-in-a-box that read as messy stacked
   panes. Now the zones are made of whitespace + hairlines, the metadata recedes to quiet
   inline rows, the secondary actions share ONE quiet style, and the reply body is the
   single emphasized surface. Warm cream + sage, kept in BOTH light and dark (never
   inverted). Classes are `efk-` prefixed and scoped to the reader body. The reply runs
   through the REAL /email/ pipeline (AI draft, signature, send), not a copy. */

/* The focused panel owns the actions — hide the standard reply bar + attachments.
   Scoped !important because the reply bar sets its own display:!important. */
#email-reader-content.is-fokus-reader #email-reader-reply,
#email-reader-content.is-fokus-reader #email-reader-attachments { display: none !important; }

/* Let the warm card breathe on the reader surface. */
#email-reader-content.is-fokus-reader #email-reader-body {
  background: transparent;
}

/* The focused reply FILLS the reader box — no inner floating card. .efk-reply was a
   centered ~780px card (border + shadow + radius 18) sitting inside #email-reader-content,
   i.e. a box-in-a-box. Make it fill the reader box and flow like the normal (#alle) reader:
   ONE box, the content directly inside. (!important on max-width beats the shared 780px
   `.email-reader-body > *` content cap in email-reader-content-card.css.) */
#email-reader-content.is-fokus-reader .efk-reply {
  max-width: none !important;
  margin: 0 !important;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

/* Slim header is only used for the "Tilbage til Fokus" bar in the original view.
   In the normal card view it is left EMPTY and collapses (no wasted strip on top);
   the card owns its own close in the corner. */
#email-reader-header.email-reader-header-fokus {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sk-border);
  background: transparent;
}
#email-reader #email-reader-header.email-reader-header-fokus:empty {
  /* The empty fokus header must collapse — the fokus card owns its own close. Two rules
     otherwise force it visible with !important: email-reader-content-card.css sets
     display:grid !important at >=1200px (selector specificity 0,5,0), and reader.js's
     injectMobileReaderPolish injects display:grid + padding:8px 12px 10px !important on
     #email-reader #email-reader-header at <=640px (selector 2,0,0). To beat BOTH, this
     selector uses two ids + two classes (2,2,0) with !important — more classes
     than the mobile 2-id rule, more ids than the desktop 5-class rule. The earlier 1-id
     form (1,2,0) lost to the mobile rule and left an ~18px strip on phones. */
  display: none !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  min-height: 0 !important;
}
.email-fokus-reader-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--sk-text-secondary);
  cursor: pointer;
}
.email-fokus-reader-close:hover { background: var(--sk-bg-hover); }
.email-fokus-reader-sender {
  font-size: var(--email-fs-body-tight);
  font-weight: 600;
  color: var(--sk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── The warm letter card shell ──────────────────────────────────────────── */
.efk-reply {
  position: relative;
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 20px auto;
  padding: 28px 30px;
  border-radius: 18px;
  background: #FFFEFB;
  border: 1px solid rgba(228, 220, 212, 0.6);
  box-shadow:
    0 1px 2px rgba(92, 77, 67, 0.06),
    0 8px 28px rgba(92, 77, 67, 0.06);
  text-align: left;
  color: #3D3028;
}

/* Quiet close in the card's top-right corner (replaces the old 70px header bar). */
.efk-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #A89B8E;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.efk-close:hover { background: rgba(110, 138, 126, 0.10); color: #5C4D43; }
.efk-close svg { width: 18px; height: 18px; }

/* The email subject is the card headline. padding-right clears the absolute top-right
   close button (34px @ right:16px) so a long subject wraps instead of running under it. */
.efk-title {
  margin: 0 0 18px;
  padding-right: 44px;
  font-size: var(--email-fs-heading);
  line-height: 1.25;
  font-weight: 650;
  color: #3A2F26;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* ── Their message: a quiet attribution line over an indented quote ──────────
   Redesign: NOT a filled box. The box-in-a-box made the card read as stacked panes.
   "Who wrote it" is a muted line; the quote is indented behind a soft sage left-rule
   (a semantic quote mark, not a selection bar) — its own calm zone made of whitespace
   and a hairline, not chrome. */
.efk-source {
  margin: 0 0 24px;
  padding: 0;
  background: none;
  border: none;
}
.efk-source-from {
  margin: 0 0 8px;
  font-size: var(--email-fs-meta);
  font-weight: 400;
  color: #6E5D50;
}
.efk-source-quote {
  margin: 0 0 12px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid rgba(110, 138, 126, 0.45);
  font-size: var(--email-fs-body-lg);
  line-height: 1.55;
  color: #4A3D34;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* The two quiet source actions (Læs teksten · Vis original) share one calm row. The
   foldout (.efk-original-foldout) keeps its own block flow below — only the bare toggle
   wrapper is pulled inline. */
.efk-source .efk-listen { vertical-align: middle; margin-left: -6px; }
.efk-source > div:not(.efk-original-foldout) {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}

/* Secondary actions — ONE quiet family (sage text + icon, soft wash on hover). Used by
   the source "Læs teksten", the reply "Læs dit svar op", and "Forbedr med AI", so the
   minor actions no longer wear three different pill/outline styles. */
.efk-listen,
.efk-revise {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #4A7A68;
  font-size: var(--email-fs-meta);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.efk-listen:hover,
.efk-revise:hover { background: rgba(110, 138, 126, 0.10); color: #2F5847; }
.efk-listen:disabled { opacity: 0.4; cursor: default; }
.efk-listen:disabled:hover { background: transparent; color: #4A7A68; }
.efk-listen.is-playing { background: rgba(110, 138, 126, 0.14); color: #2F5847; }
/* Loading: between the click and the first audio the speaker icon becomes a small
   sage spinner (the TTS fetch takes a moment — without this the click reads as dead).
   Clicking again during loading still cancels, so the button stays active. */
.efk-listen.is-loading { background: rgba(110, 138, 126, 0.10); color: #2F5847; }
.efk-listen.is-loading .efk-listen-ico svg { display: none; }
.efk-listen.is-loading .efk-listen-ico::after {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(110, 138, 126, 0.3);
  border-top-color: #4A7A68;
  animation: efk-listen-spin 0.7s linear infinite;
}
@keyframes efk-listen-spin {
  to { transform: rotate(360deg); }
}
.efk-listen-ico { display: inline-flex; align-items: center; justify-content: center; }
.efk-ico { width: 16px; height: 16px; flex: 0 0 auto; }
/* "Forbedr med AI" is the one high-value secondary — a faint persistent sage chip so it
   sits a touch apart from the read-aloud utilities (QA: as plain text it was too easy to
   miss), while staying far calmer than the old bordered pill. */
.efk-revise { background: rgba(110, 138, 126, 0.12); }
.efk-revise:hover { background: rgba(110, 138, 126, 0.2); }

/* ── "Dit svar": the visible, editable reply ─────────────────────────────── */
.efk-task {
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid rgba(228, 220, 212, 0.7);
}
.efk-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
/* "Dit svar" is a calm section label — sentence case, warm near-black, not a shouty
   uppercase micro-tag (the card had six competing uppercase labels). */
.efk-answer-title {
  margin: 0;
  font-size: var(--email-fs-body-tight);
  font-weight: 600;
  color: #3A2F26;
}

.efk-field { margin-bottom: 12px; }
/* Field labels (Fra/Til/Emne/Besked) recede — muted, light, sentence case. */
.efk-field-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: #7A6E62;
}

/* Fra / Til / Emne are rarely-changed metadata — quiet inline rows joined by hairlines,
   NOT a bordered/tinted box (the old "envelope" read as a 2nd stacked pane). Just
   label + value on a calm line; the group recedes so the reply below draws the eye. */
.efk-task .efk-field:not(:has(.efk-letter--body)) {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 42px;
  margin: 0;
  padding: 4px 2px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(58, 47, 38, 0.08);
}
.efk-task .efk-answer-head + .efk-field {
  border-top: 1px solid rgba(58, 47, 38, 0.08);
}
.efk-task .efk-field:not(:has(.efk-letter--body)) .efk-field-label {
  flex: 0 0 48px;
  margin: 0;
}
.efk-task .efk-field:not(:has(.efk-letter--body)) .efk-letter,
.efk-task .efk-field:not(:has(.efk-letter--body)) .efk-from-wrap {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 0;
  min-height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--email-fs-body-sm);
  color: #3A2F26;
}
.efk-task .efk-field:not(:has(.efk-letter--body)) .efk-from-trigger { padding-right: 26px; }
/* The From menu drops out of this row — it must not be clipped by the metadata row's
   ellipsis overflow (the rule above sets overflow:hidden on the wrap for label text). */
.efk-task .efk-field:not(:has(.efk-letter--body)) .efk-from-wrap { overflow: visible; }
/* The reply body sits below the metadata as the focused writing sheet. */
.efk-task .efk-field:has(.efk-letter--body) { margin-top: 22px; }

.efk-letter {
  display: block;
  min-height: 1.5em;
  padding: 10px 14px;
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: #3D3028;
  background: rgba(253, 247, 243, 0.5);
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 12px;
  overflow-wrap: anywhere;
}
/* "Fra" sender picker — custom calm menu. The native <select> stays the focusable
   value owner but is INVISIBLE (the OS option popup never matched the warm card);
   a styled trigger + an inline listbox panel render the choice in both themes. */
.efk-from-wrap { position: relative; }
.efk-from-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.efk-from-trigger {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 34px;
  border-radius: 8px;
  font-size: var(--email-fs-body-sm);
  color: #3A2F26;
  transition: background 0.15s ease;
}
.efk-from-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.efk-from-wrap:hover .efk-from-trigger,
.efk-from-wrap.is-open .efk-from-trigger { color: #2F5847; }
/* Keyboard focus on the (invisible) native select paints the ring on the visible trigger. */
.efk-from-native:focus-visible ~ .efk-from-trigger {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}
.efk-from-chevron {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
  color: #9A8E82;
}
.efk-from-chevron svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.efk-from-wrap.is-open .efk-from-chevron svg { transform: rotate(180deg); }

/* The dropped-down account list: a small warm card, rows with a sage check on the
   chosen sender. Lives inside the wrap (absolute), so it scrolls with the field and
   a card re-render sweeps it away with everything else. */
.efk-from-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -8px;
  z-index: 30;
  min-width: min(260px, calc(100vw - 48px));
  max-width: min(400px, calc(100vw - 48px));
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: #FFFEFB;
  border: 1px solid rgba(228, 220, 212, 0.9);
  border-radius: 14px;
  box-shadow:
    0 2px 6px rgba(92, 77, 67, 0.08),
    0 16px 40px rgba(92, 77, 67, 0.16);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.efk-from-menu.is-visible { opacity: 1; transform: none; }
.efk-from-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: var(--email-fs-body-sm);
  line-height: 1.4;
  color: #3D3028;
  cursor: pointer;
}
.efk-from-row--focused { background: rgba(110, 138, 126, 0.10); }
.efk-from-row--selected { font-weight: 600; }
.efk-from-row-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.efk-from-row-check {
  display: none;
  flex: 0 0 auto;
  color: #4A7A68;
  line-height: 0;
}
.efk-from-row--selected .efk-from-row-check { display: inline-flex; }
.efk-letter--body {
  min-height: 130px;
  padding: 20px 22px;
  /* The reply IS the hero — now the ONLY tinted surface on the sheet (the source box
     and the metadata box are gone), so a soft warm tint + a hairline is enough to say
     "write here"; the heavy drop-shadow that made it a floating pane is dropped. */
  background: #FBF8F2;
  border: 1px solid rgba(58, 47, 38, 0.08);
  border-radius: 14px;
  box-shadow: none;
}
.efk-letter--body p { margin: 1em 0; }
.efk-letter--body p:first-child { margin-top: 0; }
.efk-letter--body p:last-child { margin-bottom: 0; }
.efk-letter--body ul,
.efk-letter--body ol { margin: 0.5em 0; padding-left: 1.5em; }
.efk-letter:empty::before {
  content: attr(data-placeholder);
  color: #9A8E82;
  opacity: 0.8;
}
.efk-letter--body [data-efk-body] { min-height: 96px; outline: none; cursor: text; white-space: pre-wrap; }
.efk-letter--body [data-efk-body]:empty::before {
  content: attr(data-placeholder);
  color: #9A8E82;
  opacity: 0.8;
}
/* Inline signature inside the Besked field. Render the user's saved signature
   FAITHFULLY — its own size, colour and separator. The card only adds spacing; it must
   NOT impose a divider / smaller size / grey colour on a signature the user crafted
   (the signature is directly editable here, like /chat/). */
.efk-sig-preview {
  margin-top: 14px;
}
.efk-sig-preview:empty { display: none; }

/* Body head: label + "Læs dit svar op" */
.efk-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.efk-body-head .efk-field-label { margin-bottom: 0; }

/* Skeleton while the AI draft loads */
.efk-letter--loading { cursor: default; }
.efk-letter--loading .efk-skel-line {
  display: block;
  height: 0.72em;
  margin: 0 0 0.66em;
  border-radius: 6px;
  background-color: rgba(228, 220, 212, 0.6);
  background-image: linear-gradient(
    90deg,
    rgba(228, 220, 212, 0) 0%,
    rgba(253, 247, 243, 0.9) 50%,
    rgba(228, 220, 212, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 180% 100%;
  animation: efk-skel-shimmer 1.5s ease-in-out infinite;
}
.efk-letter--loading .efk-skel-line:first-child { margin-top: 3px; }
.efk-letter--loading .efk-skel-line:nth-child(1) { width: 94%; }
.efk-letter--loading .efk-skel-line:nth-child(2) { width: 82%; }
.efk-letter--loading .efk-skel-line:nth-child(3) { width: 64%; }
@keyframes efk-skel-shimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

/* Status region */
.efk-status { }
.efk-sent {
  margin: 14px 0 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #6E8A7E;
}
.efk-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #9B6050;
  background: rgba(155, 96, 80, 0.08);
  border: 1px solid rgba(155, 96, 80, 0.2);
  border-radius: 10px;
}

/* Actions */
.efk-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.efk-send {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  background: #6E8A7E;
  color: #FFFFFF;
  border: none;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(110, 138, 126, 0.22);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.efk-send:hover:not([disabled]) {
  background: color-mix(in srgb, #6E8A7E 88%, black);
  box-shadow: 0 10px 22px rgba(110, 138, 126, 0.28);
  transform: translateY(-1px);
}
.efk-send[disabled] { opacity: 0.55; cursor: not-allowed; }
/* REGRESSION GUARD: email-responsive.css resets `.email-page button { min-height: auto }`
   on desktop (≥768px, specificity 0,1,1), which outranks `.efk-send`/`.efk-quiet` (0,1,0)
   and collapsed these pill buttons to ~26px — they carry NO vertical padding, so their
   height comes solely from min-height. Restore it at matching specificity so the Fokus
   action buttons keep their proper size, consistent with the rest of the app's buttons. */
.email-page .efk-send,
.email-page .efk-quiet,
.email-page .efk-undo-btn { min-height: 48px; }
/* "Senere" is the quiet defer action — a calm text button, grouped with the others
   (no far-right float, which read as detached / tacked-on). */
.efk-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  border: none;
  background: transparent;
  color: #6E5D50;
  font-size: var(--email-fs-body-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 0 10px;
}
.efk-quiet:hover { color: #5C7468; }

/* #send-safety: recipient-lock hint — a calm note shown only when there is reply text but no
   valid recipient yet (you cleared the Til field), so a disabled Send is never mysterious. */
.efk-tohint {
  margin: 12px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #9B6050;
}
.efk-tohint[hidden] { display: none; }

/* #send-safety: undo-send window. Hidden until a send is held; it replaces the actions with one
   "Fortryd" whose ring depletes over --efk-undo-dur, plus a per-second numeric count. */
.efk-undo-row {
  display: flex;
  align-items: center;
  margin-top: 22px;
}
.efk-undo-row[hidden] { display: none; }
.efk-undo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(110, 138, 126, 0.35);
  border-radius: 14px;
  background: rgba(110, 138, 126, 0.10);
  color: #2F5847;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.efk-undo-btn:hover { background: rgba(110, 138, 126, 0.18); }
.efk-undo-ring { position: relative; width: 22px; height: 22px; display: inline-flex; }
.efk-undo-ring svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.efk-undo-ring__track { fill: none; stroke: rgba(110, 138, 126, 0.25); stroke-width: 3; }
.efk-undo-ring__fill {
  fill: none;
  stroke: #6E8A7E;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100.5;   /* 2 * pi * r(16) */
  stroke-dashoffset: 0;
}
.efk-undo-row.is-counting .efk-undo-ring__fill {
  animation: efk-undo-deplete var(--efk-undo-dur, 5000ms) linear forwards;
}
@keyframes efk-undo-deplete {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100.5; }
}
.efk-undo-count { font-size: var(--font-size-sm); font-weight: 500; color: #6E5D50; min-width: 12px; }

/* During the held send, only Fortryd is active. Hide the corner ✕ and the Send/Senere actions,
   and neutralize the in-card controls so an in-card click can't commit the send early (the JS
   onClick also ignores non-undo actions; this is the visual signal + a mouse-side block). The
   reply body stays readable (no opacity dim) but non-editable (pointer-events:none) so you review
   the exact text that is about to send. The undo row is excluded — it stays fully active. */
.efk-reply.is-sending .efk-close { display: none; }
.efk-reply.is-sending .efk-actions { display: none; }
.efk-reply.is-sending .efk-revise,
.efk-reply.is-sending .efk-listen,
.efk-reply.is-sending .efk-original-toggle { pointer-events: none; opacity: 0.45; }
.efk-reply.is-sending .efk-letter { pointer-events: none; }
/* The From picker locks too (the old select inherited .efk-letter's lock; the custom
   wrap must not reopen a sender menu while the payload is frozen — the row stays
   readable, undimmed, so the user can review exactly what is about to send). */
.efk-reply.is-sending .efk-from-wrap { pointer-events: none; }

/* The sending identity echoed under "Svar sendt til X" — the wrong-From catch in the undo window. */
.efk-sent-from { margin: 4px 0 0; font-size: var(--font-size-sm); color: #6E5D50; }

/* Vis original toggle (quiet sage text under the source) */
.efk-original-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: #4A7A68;
  font-size: var(--email-fs-meta);
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
}
.efk-original-toggle:hover { background: rgba(110, 138, 126, 0.10); color: #2F5847; }
/* Vis original → inline foldout (the calm in-place reveal Morten asked for; replaces
   the old full-panel swap to a bare iframe view). Grid 0fr→1fr animates the open;
   the host carries the real sanitized, sandboxed original-email iframe. */
.efk-original-foldout {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.efk-original-foldout[data-open="true"] { grid-template-rows: 1fr; margin-top: 14px; }
.efk-original-foldout-inner { overflow: hidden; min-height: 0; }
.efk-original-card {
  border-top: 1px solid rgba(58, 47, 38, 0.08);
  padding-top: 14px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s;
}
.efk-original-foldout[data-open="true"] .efk-original-card { opacity: 1; transform: none; }
.efk-original-label {
  margin: 0 0 9px;
  font-size: var(--email-fs-micro);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #9A8E82;
}
.efk-original-host {
  border: 1px solid rgba(58, 47, 38, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFEFB;
}
/* The toggle chevron flips to point up when the original is open. */
.efk-original-toggle svg { transition: transform 0.25s ease; }
.efk-original-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Focus rings: sage #6E8A7E */
.efk-listen:focus-visible,
.efk-revise:focus-visible,
.efk-send:focus-visible,
.efk-close:focus-visible,
.efk-quiet:focus-visible,
.efk-undo-btn:focus-visible,
.efk-original-toggle:focus-visible,
.email-fokus-reader-close:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}
/* The card receives focus programmatically when it opens (so AT lands on it); that
   is not a keyboard-tab, so it must not paint a focus ring around the whole card. */
.efk-reply:focus { outline: none; }
/* Single-line letter fields keep neutral chrome on focus (the caret is enough). The reply
   BODY shows a sage edit-border on hover/focus so the calm filled sheet reads as an
   editable field, not static text (QA: de-chroming made it look read-only). */
.efk-letter:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: rgba(228, 220, 212, 0.7);
}
.efk-letter--body:hover { border-color: rgba(110, 138, 126, 0.32); }
.efk-letter--body:focus-within {
  outline: none;
  box-shadow: none;
  border-color: rgba(110, 138, 126, 0.5);
}

/* ── Dark mode ────────────────────────────────────────────────────────────────
   The card above was written as ink on the warm cream sheet (.efk-reply,
   background #FFFEFB). Inside the reader the sheet is flattened — the rule at the
   top of this file sets `#email-reader-content.is-fokus-reader .efk-reply
   { background: transparent }` so the fokus view fills the reader box — and in dark
   mode that box is var(--color-card) #2b2a27. The ink never followed: the subject,
   "Dit svar" and the Fra/Til/Emne values still paint #3A2F26, i.e. near-black on
   near-black, and the sage hover/active states drop to #2F5847, which disappears
   the moment you touch them. This file had no dark rules at all.

   The reply body sheet follows the theme too (product decision 2026-07-28, overriding
   the "cream in both themes" note at the top of this file): a full-width cream block
   floating in an otherwise dark card read as a UI bug, not as paper. In dark it takes
   the same surface the /email/ compose editor takes — var(--color-bg), one step darker
   than the card, with primary ink — so the two writing surfaces in this app match. */

/* Headline + section titles */
[data-theme="dark"] .efk-title,
[data-theme="dark"] .efk-answer-title,
[data-theme="dark"] .efk-source-quote {
  color: var(--color-text-primary);
}

/* Quiet supporting text */
[data-theme="dark"] .efk-source-from,
[data-theme="dark"] .efk-quiet,
[data-theme="dark"] .efk-sent-from,
[data-theme="dark"] .efk-undo-count {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .efk-quiet:hover { color: var(--color-text-primary); }

[data-theme="dark"] .efk-field-label,
[data-theme="dark"] .efk-original-label,
[data-theme="dark"] .efk-from-chevron {
  color: var(--color-text-tertiary);
}

/* The reply body — the one sheet that still paints its own surface. Mirrors
   `[data-theme="dark"] .email-compose-body` in email-darkmode.css: var(--color-bg)
   under primary ink, so writing a reply looks the same in Fokus and in compose.
   The sage edit-border gets the dark sage too, or hover/focus reads as nothing. */
[data-theme="dark"] .efk-letter--body {
  background: var(--color-bg);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--color-text-primary);
}
[data-theme="dark"] .efk-letter--body [data-efk-body] { caret-color: var(--color-text-primary); }
[data-theme="dark"] .efk-letter--body:hover { border-color: rgba(168, 197, 184, 0.32); }
[data-theme="dark"] .efk-letter--body:focus-within { border-color: rgba(168, 197, 184, 0.5); }
[data-theme="dark"] .efk-letter:empty::before,
[data-theme="dark"] .efk-letter--body [data-efk-body]:empty::before { color: var(--color-text-tertiary); }
/* Draft skeleton: the cream shimmer was tuned for the cream sheet — on the dark
   surface it flashed as three bright bars. */
[data-theme="dark"] .efk-letter--loading .efk-skel-line {
  background-color: rgba(255, 255, 255, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Fra / Til / Emne values — the unreadable ones in the screenshot. Specificity
   0,5,0 (the attribute + the four classes of the metadata-row rule above). The
   :has() guard is repeated so this stays a metadata-row rule and never reaches
   into the reply body, which is a .efk-letter too. */
[data-theme="dark"] .efk-task .efk-field:not(:has(.efk-letter--body)) .efk-letter,
[data-theme="dark"] .efk-task .efk-field:not(:has(.efk-letter--body)) .efk-from-wrap,
[data-theme="dark"] .efk-from-trigger {
  color: var(--color-text-primary);
}
[data-theme="dark"] .efk-from-wrap:hover .efk-from-trigger,
[data-theme="dark"] .efk-from-wrap.is-open .efk-from-trigger {
  color: var(--bb-sage, #A8C5B8);
}

/* Row hairlines: rgba(58, 47, 38, 0.08) is warm black at 8% — invisible on the
   dark surface, so the metadata rows lost their structure. */
[data-theme="dark"] .efk-task .efk-field:not(:has(.efk-letter--body)),
[data-theme="dark"] .efk-task .efk-answer-head + .efk-field,
[data-theme="dark"] .efk-original-card {
  border-color: rgba(255, 255, 255, 0.10);
}

/* Sage actions: #4A7A68 is a light-surface sage (~3:1 here). Lift the family to
   the app's dark sage token, and — more urgent — repaint the hover/active states,
   which are darker than the surface they sit on. */
[data-theme="dark"] .efk-listen,
[data-theme="dark"] .efk-revise,
[data-theme="dark"] .efk-original-toggle,
[data-theme="dark"] .efk-listen:disabled:hover,
[data-theme="dark"] .efk-from-row-check {
  color: var(--bb-sage, #A8C5B8);
}
[data-theme="dark"] .efk-listen:hover,
[data-theme="dark"] .efk-revise:hover,
[data-theme="dark"] .efk-original-toggle:hover,
[data-theme="dark"] .efk-listen.is-playing,
[data-theme="dark"] .efk-listen.is-loading {
  background: rgba(168, 197, 184, 0.16);
  color: #CFE5DB;
}
[data-theme="dark"] .efk-revise { background: rgba(168, 197, 184, 0.14); }
[data-theme="dark"] .efk-revise:hover { background: rgba(168, 197, 184, 0.22); }
[data-theme="dark"] .efk-listen.is-loading .efk-listen-ico::after {
  border-color: rgba(168, 197, 184, 0.3);
  border-top-color: var(--bb-sage, #A8C5B8);
}

/* Status: sent (sage) and the two rose notes — same too-dark-for-dark problem. */
[data-theme="dark"] .efk-sent { color: var(--bb-sage, #A8C5B8); }
[data-theme="dark"] .efk-error,
[data-theme="dark"] .efk-tohint { color: #e07070; }

/* Undo pill: #2F5847 text on a 10% sage wash is unreadable on the dark surface. */
[data-theme="dark"] .efk-undo-btn {
  background: rgba(168, 197, 184, 0.12);
  border-color: rgba(168, 197, 184, 0.35);
  color: #CFE5DB;
}
[data-theme="dark"] .efk-undo-btn:hover { background: rgba(168, 197, 184, 0.20); }

@media (prefers-reduced-motion: reduce) {
  .efk-letter--loading .efk-skel-line { animation: none; }
  /* The depleting ring is continuous motion — drop it; the per-second numeric count beside
     Fortryd remains as the (accessible) time signal. */
  .efk-undo-row.is-counting .efk-undo-ring__fill { animation: none; }
  /* The listen spinner stops too — the static ring + the button wash still say "busy"
     (plus aria-busy for AT). */
  .efk-listen.is-loading .efk-listen-ico::after { animation: none; }
  .efk-original-foldout,
  .efk-original-card,
  .efk-send,
  .efk-undo-btn,
  .efk-listen,
  .efk-revise,
  .efk-close,
  .efk-from-trigger,
  .efk-from-menu,
  .efk-from-chevron svg,
  .efk-original-toggle,
  .efk-original-toggle svg { transition: none; }
}

/* Responsive */
@media (max-width: 720px) {
  .efk-reply { padding: 22px 20px; margin: 14px auto; }
  .efk-actions { flex-direction: column; align-items: stretch; }
  .efk-send { width: 100%; justify-content: center; }
  .efk-quiet { margin-left: 0; justify-content: center; }
  .efk-undo-row { justify-content: stretch; }
  .efk-undo-btn { width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
  .efk-reply { padding: 18px 16px; }
  .efk-answer-head { align-items: flex-start; }
}