/*
 * web.css -- website-only styling, loaded after taskpane.css.
 *
 * The first web-only file. It exists because the two shells have started to
 * diverge visually, and the alternative -- editing taskpane.css and having
 * the change land in Word too -- is exactly what the shared-core arrangement
 * is meant to prevent. Anything here applies to the WEBSITE ONLY. The Word
 * pane never loads this file.
 */

/*
 * FULL-STRENGTH HAMSTER, his ruling 2026-08-11: "get rid of all transparency
 * for the hamster and the wordmark on the website."
 *
 * taskpane.css renders both at opacity 0.46 (0.34/0.41 in dark) because in
 * Word they are a WATERMARK behind a working panel -- faint on purpose, so
 * they never compete with the rhymes. On the website the startup screen is
 * the front door rather than an idle state, and a front door should not look
 * like a smudge.
 */
#out.startup::before,
#out.startup::after {
  opacity: 1;
}

/*
 * THE GREETING, a step darker on the web, his ruling 2026-08-11.
 *
 * taskpane.css puts it at --muted (#605e5c) because inside Word it is one
 * quiet line in a working panel. On the website it is the first sentence
 * anybody reads, sitting alone on an empty screen, and --muted reads as
 * disabled text there. Nudged toward --fg without reaching it: it says the
 * thing is alive, but it is still not a heading. The count underneath stays
 * at --faint -- the contrast between the two lines is the point.
 */
.status .greeting { color: #3d3b39; }

/* ---------- phone fixes, his report 2026-08-11 ---------- */

/*
 * "It zooms in a bit on the page when I select the search bar."
 *
 * That is iOS Safari, and it is not arbitrary: it zooms whenever a focused
 * input has a font-size UNDER 16px, on the theory that it is helping you
 * read. taskpane.css sets the body to 14px and #q inherits it, so the box is
 * 14px and every tap on it zooms the page. Nothing zooms back afterwards,
 * which is why the results then ran off the right-hand edge.
 *
 * 16px is the whole fix. It is scoped to coarse pointers -- touchscreens --
 * so the desktop box keeps the 14px proportions the pane was designed at, and
 * the Word pane is untouched either way.
 *
 * The other standard "fix" for this, maximum-scale=1 in the viewport meta,
 * is deliberately NOT used: it stops the page zooming on focus by stopping
 * the page zooming AT ALL, including for someone who is pinching because
 * they need to. Fixing our layout problem by removing their zoom is not a
 * trade worth making.
 */
@media (pointer: coarse) {
  #q { font-size: 16px; }
}

/* ---------- the loading wheel (web-loading.js) ---------- */

/*
 * taskpane.js writes its own "Loading dictionary…" line into #out, which is
 * right in Word and redundant here -- the wheel says the same thing better.
 * Hidden rather than removed, so nothing in taskpane.js has to change and the
 * line comes back the instant the body class goes away.
 */
body.rh-loading #out .status { visibility: hidden; }

#rhload {
  position: fixed;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  text-align: center;
  /* Never in the way of the search box: someone who wants to start typing
     while this is on screen must be able to click straight through it. */
  pointer-events: none;
  transition: opacity 300ms ease;
}

#rhload.rhdone { opacity: 0; }

#rhload svg {
  width: 104px;
  height: 104px;
  display: block;
  margin: 0 auto 14px;
}

#rhload .rhtrack {
  fill: none;
  stroke: var(--rule);
  stroke-width: 6;
}

/* The spokes turn from the centre; without this they orbit the corner. */
#rhload .rhspokes {
  stroke: var(--faint);
  stroke-width: 2;
  transform-origin: 45px 45px;
}

/*
 * The progress arc. Rotated so it starts at twelve o'clock instead of three,
 * and drawn in --accent (Word blue in light, a pale blue in dark) -- a hue
 * that stays legible for him in both themes. The percentage underneath is not
 * decoration: it is the unambiguous version of what the ring is showing, for
 * anyone the colour does not reach.
 */
#rhload .rhfill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 45px 45px;
}

#rhload .rhpct {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

#rhload .rhline {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

#rhload .rhqueued {
  margin: 10px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--accent);
  min-height: 1em;
}

@media (prefers-reduced-motion: reduce) {
  #rhload .rhspokes { transform: none !important; }
}

/* ---------- the reading column, his ruling 2026-08-11 ---------- */

/*
 * "I don't want the bar to stretch super-wide to fill the whole screen."
 *
 * The pane was designed for a ~320px Word panel, so every width in
 * taskpane.css is a percentage and on a 27-inch monitor the search bar
 * becomes a 2,000px trough. RhymeZone, which he named as the reference, runs
 * its page in a 960px column (measured: their content container is 960px on a
 * 1280px window), so that is the number.
 *
 * Done with PADDING, not max-width, so the header's bottom rule and the
 * footer's top rule still run the full width of the window -- they are the
 * frame of the app, not part of the column. max() means the column is 960px
 * when there is room and falls back to the pane's own 12px gutters when there
 * is not, so phones and the Word pane are untouched.
 *
 * Above 1000px only: below that the window IS the column.
 */
@media (min-width: 1000px) {
  body:not(.rh-wide) header,
  body:not(.rh-wide) footer {
    padding-left: max(12px, calc((100% - 960px) / 2));
    padding-right: max(12px, calc((100% - 960px) / 2));
  }
  body:not(.rh-wide) main {
    padding-left: max(12px, calc((100% - 960px) / 2));
    padding-right: max(12px, calc((100% - 960px) / 2));
  }
}

/*
 * The width toggle. Hidden entirely on narrow screens, where there is no
 * choice to make. Sits in the header's right gutter, out of the column, so it
 * never crowds the search bar.
 */
#rhwide {
  display: none;
}

/*
 * In the default column the toggle sits in the empty gutter beside the page.
 * In WIDE mode there is no gutter -- the search bar runs to the window edge
 * -- so the header has to give the button its own room, or the arrows end up
 * sitting inside the search field.
 */
@media (min-width: 1000px) {
  body.rh-wide header { padding-right: 84px; }
}

@media (min-width: 1000px) {
  #rhwide {
    display: block;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid transparent;
    background: none;
    color: var(--faint);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
  }
  #rhwide:hover {
    color: var(--accent);
    border-color: var(--rule);
  }
}

/* header is the positioning context for the toggle. */
header { position: relative; }

@media (prefers-color-scheme: dark) {
  #out.startup::before,
  #out.startup::after {
    opacity: 1;
  }

  /* The light-mode nudge inverted: a step brighter than --muted, still short
     of --fg. Same reasoning, opposite direction. */
  .status .greeting { color: #d2d0ce; }
  /*
   * The brightness lift on the wordmark is KEPT, and it is not transparency.
   * The mark is two-tone -- "Rhyme" in near-black navy, "Hamster" in green --
   * and at any opacity the navy half disappears into a dark background. Full
   * opacity makes that worse, not better: it renders a logo that reads as
   * half-missing rather than faint. Drop this only when a properly reversed
   * wordmark asset exists.
   */
  #out.startup::after {
    filter: brightness(1.9);
  }
}