/* =========================================================
   TODAY'S FRENCH SENTENCE
   A small block of text sitting directly on the page background, above the
   pinned card and the rest of the Home feed.

   The widget is a real .mn-linkcard (so links.js's delegated like/comment
   handlers work on it unchanged) with the card chrome stripped off here. That
   chrome is applied by links.css via `:is(#home, #mnLinkpageContent)
   .mn-linkcard` and a light-mode override, so the resets below are scoped
   tightly enough to outrank both. french.css loads after links.css.
   ========================================================= */

.mn-french-host {
  margin: 0 0 1.4rem;
}

.mn-french-host[hidden] {
  display: none;
}

/* ---- strip the card ---- */

#home .mn-linkcard.mn-french,
body[data-mode="light"] #home .mn-linkcard.mn-french,
body[data-mode="dark"] #home .mn-linkcard.mn-french {
  display: block;
  background: none;
  box-shadow: none;
  border: 0;
  /* No `padding` or `border-radius` here on purpose — the shared .mn-w chrome
     owns both for both widgets. Zeroing either would win, because this rule
     reaches (1,3,1) via its body[data-mode] variants, and the French widget
     would end up square and hugging its text while Top story looked right.
     .mn-linkcard's own 0.85rem padding is displaced by .mn-w's longhands,
     which load later. */
  gap: 0;
  overflow: visible;
  color: var(--color-text);
  transition: none;
}

/* The light-mode skin paints its tint through a ::before layer. */
body[data-mode="light"] #home .mn-linkcard.mn-french::before,
#home .mn-linkcard.mn-french::before {
  content: none;
}

#home .mn-linkcard.mn-french:hover {
  transform: none;
  box-shadow: none;
}

/* ---- the text ---- */

/* Two columns: the optional icon, then everything else. The kicker, the three
   text lines and the like/comment row all live in column 2, so they share one
   left edge instead of the kicker and the icons hanging off to the side.

   With no icon the grid is never applied, so the block is a plain stack flush
   with the container's left edge — lining up with the cards below. */
.mn-french-text {
  min-width: 0;
}

.mn-french.has-icon .mn-french-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.9rem;
}

/* The bar and the thread travel together inside the tail reveal, so only three
   rows are placed here. */
.mn-french.has-icon .mn-french-reveal-kicker { grid-column: 2; grid-row: 1; }
.mn-french.has-icon .mn-french-text          { grid-column: 2; grid-row: 2; }
.mn-french.has-icon .mn-french-reveal-tail   { grid-column: 2; grid-row: 3; }

/* Row 2 only, so the icon stays centred against the sentence block rather than
   drifting as the comment thread grows. */
.mn-french.has-icon .mn-french-icon {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
}

/* Centre the text in the row as well, so it stays level with the icon even if
   the block is ever shorter than the icon box. (Sentence + translation is two
   lines minimum today, so this is a guard rather than a fix.) */
.mn-french.has-icon .mn-french-text { align-self: center; }

.mn-french-icon {
  display: grid;
  place-items: center;
  /* Roughly two lines of the sentence tall, per the brief. */
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.7rem;
  opacity: 0.75;
}

/* ---- collapse / expand ----
   The reveal/slide/crossfade machinery now lives in home-widgets.css as the
   widget-agnostic `.mn-w-*` classes, shared with the Top story widget. The card
   carries `.mn-w` alongside `.mn-french`. Only French-specific bits remain here.
   ========================================================= */

/* ---- admin kebab ----
   Pinned to the corner rather than using the card's shared 0.55rem inset, which
   would push it into the text column, plus a gutter so a long sentence never
   runs underneath it.

   The 0.6rem top matches .mn-w's block padding: absolutely-positioned children
   resolve against the padding box, so without it the kebab rides up out of line
   with the kicker. Keep the two in step if that padding changes. */
.mn-french .mn-kebab {
  top: 0.6rem;
  right: 0.7rem;
}

.mn-french .mn-menu {
  top: 2.9rem;
  right: 0.7rem;
}

.mn-french.has-menu .mn-french-grid {
  padding-right: 2.4rem;
}

.mn-french-kicker {
  font-family: var(--font-header);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.2rem;
}

/* NOTE the deliberately heavy selectors on these three.
   base.css carries `.section p:not(.mn-subtitle) { margin; line-height;
   font-size: 1rem }` at specificity (0,2,1). The widget lives inside
   #home.section, so a plain `.mn-french-sentence` (0,1,0) loses to it and the
   whole type scale silently collapses to 16px/1.7. Adding the element +
   ancestor takes these to (0,3,1), which wins outright rather than relying on
   french.css happening to load last. */
.mn-french .mn-french-text p.mn-french-sentence {
  font-family: var(--font-serif);
  font-weight: 700;
  /* Bold serif, upright — the italic's slant threw the first character off the
     shared left edge, which is the whole point of the column. */
  font-style: normal;
  font-size: var(--w-lead);
  /* Tight leading and small margins: at this size the default 1.35 left a
     visible moat above and below the sentence, which broke up the block. Still
     loose enough for a sentence that wraps to two lines. */
  line-height: 1.25;
  margin: 0 0 0.15rem;
  color: var(--color-text);
}

.mn-french .mn-french-text p.mn-french-phon {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0 0 0.3rem;
  opacity: 0.72;
}

/* No rule needed to "close the gap" when the phonetic line is absent — it
   simply isn't rendered, and the sentence's own bottom margin does the work. */
.mn-french .mn-french-text p.mn-french-en {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0;
  opacity: 0.85;
}

/* ---- interaction row + comments ----
   Both carry negative margins tuned to the card's 0.85rem padding and its
   kebab-menu gutter. There is no card here, so those are unwound. */

.mn-french .mn-linkcard-bar {
  margin-top: 0.7rem;
  margin-right: 0;
  align-self: auto;
  justify-content: flex-start;
  padding-right: 0;
}

.mn-french .mn-comments-wrap {
  margin-right: 0;
  padding-right: 0;
}

/* The rule sat flush against the like/comment row. Covers both places it can
   render: inside the collapsible section (no comments yet) and in the always-
   visible preview (comments exist). Safe while collapsed — the section is a
   0fr grid row over an overflow:hidden inner, so this margin is clipped. */
.mn-french .mn-comments-divider {
  margin-top: 0.85rem;
}

/* Comment-icon hover.
   links.css tints it with `color-mix(var(--story-solid) 90%, #fff 10%)`, which
   works on a feed card because data-color resolves --story-solid to a real
   category colour. This widget carries no category, so --story-solid falls back
   to --color-accent-soft — rgba(20,20,20,.12) light / rgba(255,255,255,.16)
   dark — i.e. a ~13% alpha tint that is all but invisible in either mode.
   A solid colour per mode instead, mirroring how the heart hard-codes #ff6b8a. */
.mn-french .mn-linkcard-comments:hover i,
.mn-french .mn-linkcard-comments:focus-visible i {
  color: #2f7fc4;
}

body[data-mode="dark"] .mn-french .mn-linkcard-comments:hover i,
body[data-mode="dark"] .mn-french .mn-linkcard-comments:focus-visible i {
  color: #7cc4ff;
}

/* ---- emergency mode ----
   Nothing to strip (the widget is text only), but the serif face is dropped so
   the page falls back to a single family. */
body.mn-emergency .mn-french .mn-french-text p.mn-french-sentence {
  font-family: var(--font-body);
}

@media (max-width: 640px) {
  .mn-french-host {
    margin-bottom: 1.1rem;
  }
  /* Must match the specificity of the desktop rules above, or they'd win.
     The sentence size is not here — it comes from --w-lead. */
  .mn-french .mn-french-text p.mn-french-phon,
  .mn-french .mn-french-text p.mn-french-en {
    font-size: 0.82rem;
  }
  .mn-french.has-icon .mn-french-grid {
    column-gap: 0.7rem;
  }
  .mn-french-icon {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.4rem;
  }
}

/* =========================================================
   LEARNING FRENCH — Home Settings tab
   Lives inside .mn-settings-pane, so it inherits the modal's chrome.
   ========================================================= */

.mn-french-admin {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.mn-french-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.mn-french-search {
  position: relative;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
}

.mn-french-search i {
  position: absolute;
  left: 0.7rem;
  font-size: 0.8rem;
  opacity: 0.5;
  pointer-events: none;
}

.mn-french-search input {
  width: 100%;
  padding: 0.5rem 0.7rem 0.5rem 2rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--panel-border);
  background: color-mix(in srgb, var(--panel-bg) 60%, transparent);
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.mn-french-search input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent-soft) 60%, transparent);
  outline-offset: 1px;
}

.mn-french-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---- add form ---- */

.mn-french-form {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: color-mix(in srgb, var(--panel-bg) 45%, transparent);
}

.mn-french-form.hidden {
  display: none;
}

.mn-french-form-title {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.mn-french-field {
  display: grid;
  gap: 0.25rem;
}

.mn-french-field > span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

.mn-french-field > span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}

/* Icon row: label spans, then input + live preview side by side, hint below. */
.mn-french-field-icon {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.mn-french-field-icon > span:first-child,
.mn-french-field > .mn-french-field-hint {
  grid-column: 1 / -1;
}

.mn-french-field-icon input {
  grid-column: 1;
}

/* These two must outrank `.mn-french-field > span` above, which would
   otherwise impose its uppercase label styling on both. */
.mn-french-field > .mn-french-icon-preview {
  grid-column: 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}

.mn-french-field > .mn-french-field-hint {
  font-size: 0.72rem;
  opacity: 0.55;
  text-transform: none;
  letter-spacing: 0;
}

.mn-french-field input {
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.88rem;
}

.mn-french-field:first-of-type input {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
}

.mn-french-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mn-french-form-error {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--color-danger, #d9534f);
}

/* ---- queued rows ---- */

.mn-french-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
  min-height: 0;
}

.mn-french-empty {
  padding: 1.4rem 0.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

.mn-french-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: color-mix(in srgb, var(--panel-bg) 45%, transparent);
}

.mn-french-row-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.9rem;
  font-size: 1.05rem;
  opacity: 0.7;
}

.mn-french-row-text {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

/* Each label truncates on its own line: the whole point of the list is to scan
   many sentences, so a long one must not push the row's height around. */
.mn-french-row-text > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mn-french-row-fr {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 0.92rem;
}

.mn-french-row-phon {
  font-size: 0.76rem;
  opacity: 0.65;
}

.mn-french-row-en {
  font-size: 0.8rem;
  opacity: 0.85;
}

.mn-french-row-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.mn-french-mini {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 0.78rem;
  opacity: 0.75;
}

.mn-french-mini:hover:not(:disabled) {
  opacity: 1;
  background: color-mix(in srgb, var(--panel-bg) 80%, transparent);
}

.mn-french-mini:disabled {
  opacity: 0.25;
  cursor: default;
}

.mn-french-mini-danger:hover:not(:disabled) {
  color: var(--color-danger, #d9534f);
}

/* Armed state of the two-step delete. Must come after .mn-french-mini — same
   specificity, so source order is what lets it override the 28px icon box. */
.mn-french-confirm {
  width: auto;
  height: 28px;
  padding: 0 0.6rem;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #d9534f;
  opacity: 1;
  cursor: pointer;
}

.mn-french-confirm:hover {
  background: #c9433f;
}

@media (max-width: 640px) {
  .mn-french-row {
    align-items: flex-start;
  }
  .mn-french-row-actions {
    align-self: center;
  }
}

/* ---- Edit today's sentence (admin dialog) ---- */
.mn-french-edit-panel {
  width: min(520px, calc(100vw - 1.2rem));
}

/* .mn-settings-foot right-aligns its children; push the error to the left so
   it reads as a message rather than a third button. */
.mn-french-edit-error {
  margin-right: auto;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #d9534f;
}

/* "Post now" — jumps a queued sentence onto the Home page immediately. Tinted
   because it is the one control in this list that acts at once rather than on
   the modal's Save. */
.mn-french-mini-now:hover:not(:disabled) {
  color: #2f7fc4;
}

body[data-mode="dark"] .mn-french-mini-now:hover:not(:disabled) {
  color: #7cc4ff;
}