/* ==========================================================================
   Talmud Daily — learner account pages

   The account pages use the theme's own page furniture: `.td-standard-shell`
   for the container, `.td-standard-hero` for the eyebrow/title/lede block,
   `.td-standard-content` for the reading column, and `.btn` / `.btn-ghost` for
   actions. None of that is restated here.

   What remains is only what the theme has no equivalent for. The theme has
   never shipped a first-party form — Gravity Forms brings its own styling — so
   form controls, result notices, and the small account-specific pieces are
   authored here, in the theme's idiom and using its custom properties.
   ========================================================================== */

/* ------------------------------------------------------------- structure */

/*
 * A form is easier to read in a narrow measure than body copy, so the account
 * column is slightly tighter than `.td-standard-content`'s 640px.
 */
.td-page .td-account-form {
  max-width: 520px;
}

/*
 * Every secondary section is separated from whatever precedes it, not only from
 * another section — on `/my-account/` the thing above is the profile form, so a
 * sibling-only rule left the two blocks touching.
 */
.td-page .td-account-section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}

.td-page .td-account-section > h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 8px;
}

.td-page .td-account-section > p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 58ch;
}

/* ----------------------------------------------------------------- fields */

.td-page .td-account-field {
  margin-bottom: 24px;
}

.td-page .td-account-field label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 9px;
}

.td-page .td-account-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-style: italic;
  font-family: var(--serif);
  font-size: 15px;
  margin-left: 7px;
}

/*
 * Two fields on one line where there is room for them, one below the other
 * where there is not. `minmax(0, 1fr)` on both tracks stops a long name from
 * pushing the row wider than the form.
 */
.td-page .td-account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 20px;
}

.td-page .td-account-field input[type="email"],
.td-page .td-account-field input[type="text"],
.td-page .td-account-field input[type="password"],
.td-page .td-account-field select {
  display: block;
  width: 100%;
  padding: 15px 16px;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  border-radius: 1px;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.td-page .td-account-field input::placeholder { color: rgba(94, 92, 80, 0.55); }

.td-page .td-account-field input:hover,
.td-page .td-account-field select:hover { border-color: var(--muted); }

.td-page .td-account-field input:focus,
.td-page .td-account-field select:focus {
  outline: none;
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(80, 14, 15, 0.13);
}

/*
 * The select is drawn as one of the text fields rather than as the browser's
 * own control, so the form reads as a single set of inputs. The native arrow is
 * replaced by an inline SVG chevron in the theme's ink, which needs no request
 * and cannot flash unstyled.
 */
.td-page .td-account-field select {
  padding-right: 46px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235E5C50' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Until a real answer is chosen the placeholder reads as placeholder text. */
.td-page .td-account-field select:invalid { color: rgba(94, 92, 80, 0.55); }

.td-page .td-account-field input[readonly],
.td-page .td-account-field input[disabled] {
  background: rgba(201, 191, 166, 0.28);
  color: var(--muted);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--muted);
  opacity: 1;
}

.td-page .td-account-field input[readonly]:hover { border-color: var(--rule); }

.td-page .td-account-hint {
  display: block;
  margin-top: 9px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* Password field with a reveal control, added by script. */
.td-page .td-account-password { position: relative; }
.td-page .td-account-password input { padding-right: 92px; }

.td-page .td-account-reveal {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  padding: 0 16px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burgundy);
  cursor: pointer;
}

.td-page .td-account-reveal:hover { background: rgba(80, 14, 15, 0.06); }

.td-page .td-account-checkbox {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-soft);
}

.td-page .td-account-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--burgundy);
  flex: none;
  margin: 0;
}

.td-page .td-account-checkbox label { margin: 0; cursor: pointer; }

/* ---------------------------------------------------------------- actions */

.td-page .td-account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 4px;
}

.td-page .td-account-links {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 520px;
}

.td-page .td-account-links p { margin: 0; }

/* Any link in these blocks, including one sitting beside a button. */
.td-page .td-account-links a,
.td-page .td-account-copy a,
.td-page .td-account-actions a:not(.btn) {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.td-page .td-account-copy {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
}

.td-page .td-account-copy + .td-account-copy { margin-top: 18px; }

/* --------------------------------------------------------------- notices */

.td-page .td-account-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 520px;
  margin: 0 0 36px;
  padding: 16px 18px;
  border-left: 3px solid var(--muted);
  background: rgba(94, 92, 80, 0.07);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  border-radius: 0 2px 2px 0;
}

.td-page .td-account-notice--success {
  border-left-color: var(--sage);
  background: rgba(167, 168, 133, 0.16);
}

.td-page .td-account-notice--error {
  border-left-color: var(--burgundy);
  background: rgba(80, 14, 15, 0.07);
}

/*
 * The unmodified notice is the neutral tone, which is what a prompt wants: the
 * page is asking for something, not reporting that anything went wrong. The
 * modifier exists so the intent is legible in the markup.
 */
.td-page .td-account-notice--prompt { border-left-color: var(--rule); }

.td-page .td-account-notice svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.td-page .td-account-notice--success svg { color: #5C6B3C; }
.td-page .td-account-notice--error svg { color: var(--burgundy); }

/* ------------------------------------------------------- success states */

/*
 * A terminal state — "check your email", "email confirmed" — earns a panel of
 * its own rather than a line of text, because it is the whole answer to what
 * the visitor just did. It stays deliberately small: the hero above it already
 * says the headline, and a page-sized tick would be decoration standing in for
 * information.
 */
.td-page .td-account-success {
  max-width: 560px;
  margin: 0 0 40px;
  padding: 24px 26px;
  background: rgba(167, 168, 133, 0.14);
  border: 1px solid rgba(167, 168, 133, 0.5);
  border-left: 3px solid var(--sage);
  border-radius: 0 2px 2px 0;
}

.td-page .td-account-success__heading {
  display: flex;
  font-weight: 400;
  align-items: center;
  gap: 11px;
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.td-page .td-account-success__heading svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: #5C6B3C;
}

.td-page .td-account-success__body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.td-page .td-account-success__body + .td-account-success__body { margin-top: 12px; }

/* ---------------------------------------------------------- disclosures */

/*
 * `<details>` rather than a scripted panel: it opens with a keyboard, works
 * with JavaScript off, and needs no state of its own. Used for the secondary
 * "did not receive it?" forms, which must be reachable without competing with
 * the confirmation above them.
 */
.td-page .td-account-disclosure {
  max-width: 560px;
  margin: 0 0 8px;
  padding-top: 4px;
}

.td-page .td-account-disclosure > summary {
  display: inline-block;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}

.td-page .td-account-disclosure > summary::-webkit-details-marker { display: none; }

.td-page .td-account-disclosure > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 9px;
  text-decoration: none;
  transition: transform 0.15s;
}

.td-page .td-account-disclosure[open] > summary::before { transform: rotate(90deg); }

.td-page .td-account-disclosure > summary:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
}

.td-page .td-account-disclosure > *:not(summary) { margin-top: 20px; }

/* ------------------------------------------------------- account layout */

/*
 * `/my-account/` has two kinds of content: the details a learner edits, and the
 * standing facts about their account. On a wide screen they sit side by side so
 * the page uses the width the theme gives it. `minmax(0, …)` on both tracks
 * stops a long address from forcing the grid wider than its container.
 */
.td-page .td-account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 56px 64px;
  align-items: start;
  max-width: 1000px;
}

.td-page .td-account-layout__main { min-width: 0; }

.td-page .td-account-layout__aside {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.td-page .td-account-block__title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 26px;
}

/*
 * The dashboard call-to-action's band, minus its burgundy edge: one accent per
 * screen is enough, and these panels are supporting information rather than a
 * call to act.
 */
.td-page .td-account-panel {
  padding: 24px 26px;
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.td-page .td-account-panel__title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burgundy);
  margin: 0 0 16px;
}

.td-page .td-account-panel__copy {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.td-page .td-account-panel__action {
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: 16px;
}

.td-page .td-account-panel__action a {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.td-page .td-account-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.td-page .td-account-panel__actions .btn { width: 100%; text-align: center; }
.td-page .td-account-panel__actions > form { width: 100%; }

/* Inside a panel the pill is the panel's own first line, not a page banner. */
.td-page .td-account-panel .td-account-status { margin: 0 0 16px; }

/* Confirmed-email reassurance. */
.td-page .td-account-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 34px;
  padding: 9px 15px;
  background: rgba(167, 168, 133, 0.2);
  border: 1px solid rgba(167, 168, 133, 0.55);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #4A5730;
}

.td-page .td-account-status svg { flex: none; width: 15px; height: 15px; }

/* ------------------------------------------------------- focus visibility */

.td-page .td-account-reveal:focus-visible,
.td-page .td-account-links a:focus-visible,
.td-page .td-account-copy a:focus-visible,
.td-page .td-account-actions a:focus-visible,
.td-page .td-account-actions .btn:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 640px) {
  /* One field per line: two 150px columns would be narrower than the names. */
  .td-page .td-account-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 900px) {
  .td-page .td-account-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .td-page .td-account-section { margin-top: 44px; padding-top: 32px; }
  .td-page .td-account-actions { gap: 14px 18px; }
  /* The sign-out button sits inside its own form, so the form has to stretch too. */
  .td-page .td-account-actions > form { width: 100%; }
  .td-page .td-account-actions .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .td-page .td-account-field input { transition: none; }
  .td-page .td-account-disclosure > summary::before { transition: none; }
}

/* =========================================================================
   My Progress
   =========================================================================
   Four panels in one grid, answering the four questions a learner opens the
   page with. Progress is the dominant one; Streak sits beside it because it is
   a fact about the same lessons; Voices and Continue learning share the row
   beneath.

   The panels are the same object as the `/my-account/` aside cards — cream
   surface, hairline rule, 2px radius, burgundy eyebrow — so the two pages read
   as one account system rather than two designs. All colour, type, and spacing
   comes from the theme's tokens.
   ------------------------------------------------------------------------ */

/*
 * Six columns rather than the obvious two, because the page wants *two
 * different* splits: 2fr/1fr for Progress and Streak, then 1fr/1fr for Voices
 * and Continue learning. Spans of 4/2 and 3/3 give both from one track list,
 * where a two-column grid could give only one of them.
 *
 * The grid fills `.td-standard-shell`, which the theme already caps at 1240px
 * with 48px gutters. No new page width is invented: the previous layout used
 * the same container and simply left most of it empty.
 */
.td-page .td-progress-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  margin-top: 40px;
  align-items: stretch;
}

.td-page .td-progress-card--progress { grid-column: span 4; }
.td-page .td-progress-card--streak   { grid-column: span 2; }
.td-page .td-progress-card--voices   { grid-column: span 3; }
.td-page .td-progress-card--next     { grid-column: span 3; }

/* --------------------------------------------------------------- panels */

.td-page .td-progress-card {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 28px;
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  border-radius: 2px;
  min-width: 0;
}

/* The one the learner came for gets the room, not a louder colour. */
.td-page .td-progress-card--progress { padding: 32px 34px 34px; }

.td-page .td-progress-card__title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burgundy);
  margin: 0 0 20px;
}

/*
 * Pushes the action to the foot of the panel, so Voices and Continue learning
 * line up along the bottom of the row whatever length their copy runs to.
 */
.td-page .td-progress-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: auto;
  padding-top: 22px;
}

.td-page .td-progress-card__link {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--burgundy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.td-page .td-progress-card__actions .btn:focus-visible,
.td-page .td-progress-card__link:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 1px;
}

/* -------------------------------------------------------------- the ring */

/*
 * `flex: 1` lets the figure take the height the row gives the panel, and
 * `align-content: center` then sits the ring and its counts in the middle of
 * it — so the panel matching Streak's height reads as deliberate rather than
 * as a block of empty cream beneath the ring.
 */
.td-page .td-progress-figure {
  display: flex;
  flex: 1;
  align-items: center;
  align-content: center;
  gap: 36px;
  flex-wrap: wrap;
}

/*
 * A conic gradient rather than an SVG: one element, no script, and it degrades
 * to a plain ring on a browser that does not support it. The percentage is
 * always printed as text in the middle, so the ring is never the only source
 * of the number.
 */
.td-page .td-progress-dial {
  --td-progress-percent: 0;
  position: relative;
  flex: 0 0 auto;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(
      var(--burgundy) calc(var(--td-progress-percent) * 1%),
      var(--rule) 0
    );
}

/* The inner disc that turns the filled circle into a ring. */
.td-page .td-progress-dial::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--paper-pure);
}

.td-page .td-progress-dial__value {
  position: relative;
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.td-page .td-progress-dial__unit {
  font-size: 1.2rem;
  margin-left: 1px;
  color: var(--muted);
}

/* ------------------------------------------------------------- the counts */

.td-page .td-progress-figure__detail { flex: 1 1 220px; min-width: 0; }

.td-page .td-progress-count {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 8px;
}

.td-page .td-progress-count strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.td-page .td-progress-count--bonus,
.td-page .td-progress-count--next { font-size: 1.3rem; }

.td-page .td-progress-note {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 46ch;
}

.td-page .td-progress-note + .td-progress-note { margin-top: 12px; }

.td-page .td-progress-note--done { color: var(--burgundy); }

/*
 * The standing rule, as opposed to the contextual note above it: quieter,
 * because a learner needs to read it once rather than every visit.
 */
.td-page .td-progress-note--fine {
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.875rem;
}

/* ------------------------------------------------------------- the streak */

/*
 * `auto-fit` rather than a breakpoint: the two figures sit side by side only
 * where each really has room for "12 learning days" on one line, and stack
 * otherwise. That is the narrow desktop panel and the tablet column stacked,
 * and a full-width panel on a roomy phone two-up — decided by the space the
 * panel actually has rather than by the width of the window around it.
 */
.td-page .td-streak {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px 28px;
  margin: 0 0 16px;
}

.td-page .td-streak__figure { min-width: 0; }

.td-page .td-streak__label {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}

.td-page .td-streak__value {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

.td-page .td-streak__value strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/*
 * The state of the current lesson day, which is the one thing on this panel
 * that changes from visit to visit. Marked with a rule rather than a colour
 * alone, and the wording says the state outright either way.
 */
.td-page .td-streak__note {
  padding-left: 12px;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
}

.td-page .td-streak__note--open { border-left-color: var(--burgundy); }

/* An editorial fault, so it reads as a note to staff rather than an alarm. */
.td-page .td-progress-integrity {
  margin-top: 28px;
  padding: 12px 16px;
  border-left: 2px solid var(--burgundy);
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  background: var(--paper);
}

.td-page .td-account-progress-link {
  font-family: var(--sans);
  margin-top: 6px;
}

/* ------------------------------------------------------------ responsive */

/*
 * Tablet: two equal columns. Progress keeps a full row because the ring plus
 * its figures need the width, and the action panel keeps one because a button
 * stranded in a half-width column beneath a short line of copy reads as an
 * afterthought.
 */
@media (max-width: 900px) {
  .td-page .td-progress-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .td-page .td-progress-card--progress { grid-column: span 2; padding: 28px 30px; }
  .td-page .td-progress-card--streak,
  .td-page .td-progress-card--voices { grid-column: span 1; }
  .td-page .td-progress-card--next { grid-column: span 2; }
}

@media (max-width: 640px) {
  .td-page .td-progress-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
  .td-page .td-progress-card,
  .td-page .td-progress-card--progress,
  .td-page .td-progress-card--streak,
  .td-page .td-progress-card--voices,
  .td-page .td-progress-card--next { grid-column: auto; }
  .td-page .td-progress-card { padding: 22px 20px 24px; }
  .td-page .td-progress-card--progress { padding: 24px 20px 26px; }
  .td-page .td-progress-figure { gap: 22px; }
  .td-page .td-progress-dial { width: 132px; height: 132px; }
  .td-page .td-progress-dial::before { inset: 11px; }
  .td-page .td-progress-dial__value { font-size: 2.1rem; }
  .td-page .td-progress-count { font-size: 1.3rem; }
  .td-page .td-progress-count--bonus,
  .td-page .td-progress-count--next { font-size: 1.15rem; }
  .td-page .td-streak { gap: 14px 20px; }
  .td-page .td-streak__value { font-size: 1.3rem; }
  /* A full-width tap target, matching every other button on a narrow screen. */
  .td-page .td-progress-card__actions .btn { width: 100%; text-align: center; }
}

/* =========================================================================
   Browser progress import
   =========================================================================
   A small card at the top of /my-progress/, using the theme's tokens so it
   reads as part of the page rather than an interruption. It is only ever
   rendered when this browser actually holds importable data.
   ------------------------------------------------------------------------ */

.td-page .td-import-card {
  margin-top: 32px;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--burgundy);
  background: var(--paper-pure);
}

.td-page .td-import-card__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 10px;
}

.td-page .td-import-card__body {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 14px;
  max-width: 60ch;
}

.td-page .td-import-card__note {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  margin: -8px 0 14px;
}

.td-page .td-import-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: center;
  margin: 0;
}

/* A quieter third action, so declining for ever is never the loudest choice. */
.td-page .td-import-card__link {
  display: inline-block;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.td-page .td-import-card__link:hover { color: var(--burgundy); }

/* ------------------------------------------------------------- summary */

.td-page .td-import-summary {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  max-width: 34ch;
}

.td-page .td-import-summary li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}

.td-page .td-import-summary li:last-child { border-bottom: 0; }
.td-page .td-import-summary__label { color: var(--muted); }
.td-page .td-import-summary__value { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- entries */

.td-page .td-import-entries {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  font-family: var(--sans);
  font-size: 0.9rem;
}

.td-page .td-import-entries__item {
  display: flex;
  gap: 12px;
  padding: 5px 0;
  color: var(--muted);
}

.td-page .td-import-entries__day {
  flex: 0 0 5.5em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.td-page .td-import-entries__title { min-width: 0; }

/* Only the rows that will change anything are given the ink colour. */
.td-page .td-import-entries__item--importable .td-import-entries__title { color: var(--ink); }
.td-page .td-import-entries__item--unmatched,
.td-page .td-import-entries__item--ambiguous,
.td-page .td-import-entries__item--not_eligible { text-decoration: line-through; }

/* -------------------------------------------------------------- status */

.td-page .td-import-status {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--muted);
  margin: 12px 0 0;
}

.td-page .td-import-status--error { color: var(--burgundy); }

@media (max-width: 640px) {
  .td-page .td-import-card { padding: 18px 16px; }
  .td-page .td-import-card__actions .btn { width: 100%; text-align: center; }
}