/* Correctme custom styles, layered over Bulma. */

/* ---- navbar ----------------------------------------------------------- */

/* Two stacked rows, as in the original app: the account buttons on top, right
   aligned, and the logo centred on the line under them. Bulma's own navbar
   puts the brand and the menu side by side in one row, which cannot do this,
   so the wrapper is a plain column and each row is laid out on its own. */
.navbar-center {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The buttons row comes first, the logo under it. The order is set on the
   wrapper so it does not depend on which element the markup puts first, which
   the mobile layout needs the other way round (logo, then the menu panel). */
.navbar-menu-top {
  display: flex;
  justify-content: flex-end;
  order: 1;
}

/* Bulma pulls the brand left by 0.75rem to line the logo up with the page
   container; the logo is centred instead, so that pull is only an off-centre
   nudge. The 2rem sits between the account row above and the logo, which is
   the breathing space the header opens with on desktop. */
.navbar-brand {
  order: 2;
  margin-left: 0;
  margin-top: 2rem;
  justify-content: center;
  min-height: 0;
}

.navbar-logo {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* The burger only exists on touch widths, where the account links are behind
   it. On desktop the same links sit in the row above the logo. */
.navbar-burger {
  display: none;
}

.navbar-logo img {
  display: block;
  max-height: 2.5rem;
}

/* The logo is a link back home, not a control: no grey hover wash or colour
   change on it or its image. The selector matches Bulma's own
   `.navbar.is-white .navbar-brand > a.navbar-item:hover` rule, including its
   class count, because a lower-specificity rule would simply lose to it. */
.navbar.is-white .navbar-brand > a.navbar-item.navbar-logo,
.navbar.is-white .navbar-brand > a.navbar-item.navbar-logo:hover,
.navbar.is-white .navbar-brand > a.navbar-item.navbar-logo:focus,
.navbar.is-white .navbar-brand > a.navbar-item.navbar-logo:active,
.navbar-brand a.navbar-item.navbar-logo.is-active {
  background-color: transparent;
  color: inherit;
  outline: none;
}

/* Touch widths: the logo centred on its own row, as on the previous site, with
   the account panel under it when the burger opens it. The brand and the menu
   are the same two elements as on desktop, only laid out for a narrow screen,
   so nothing is duplicated or hidden from a screen reader.

   The bar is laid out top to bottom as:
     1. an empty band, where the top menu will go;
     2. the logo, centred and larger than on desktop;
     3. an empty band, where the burger goes, with the burger at its right;
     4. the account panel, when the burger opens it.
   The bands are placeholders for tomorrow's menus. Their height is set on the
   brand row rather than on the burger, because a guest renders no burger at
   all and the logo must not move between visitor states. */
@media screen and (max-width: 1023px) {
  .navbar {
    position: relative;
  }

  .navbar-center {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0.75rem 0.5rem;
  }

  /* The brand row holds the logo, centred, with the reserved band under it. */
  .navbar-brand {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    order: 1;
    align-items: center;
    align-content: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 0;
    /* The desktop gap above the logo is replaced here by the reserved band
       above it, which is sized for tomorrow's top menu. */
    margin-top: 0;
    padding-top: 3.5rem;
  }

  .navbar-logo {
    padding: 0.5rem 0;
  }

  /* Larger than on desktop: the logo is what the page opens with on a phone.
     The asset is wide (about 5:1), so it is sized by width, down to the space
     inside the bar's side padding on the narrowest screen. */
  .navbar-logo img {
    width: 13rem;
    max-width: calc(100vw - 3rem);
    height: auto;
    max-height: none;
  }

  /* The logo sits above the band reserved for the burger; the account panel
     opens below that band. The band's height is set here, not on the burger,
     so it is the same for a guest. */
  .navbar-brand::after {
    content: "";
    flex-basis: 100%;
    height: 3rem;
  }

  /* The burger floats in that band, at its right edge. z-index keeps it above
     the band's box; Bulma positions its three bars absolutely inside it. */
  .navbar-burger {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 2.5rem;
    height: 2.5rem;
  }

  /* The account links are hidden behind the burger and drop down as a panel
     under the bar when it is open. The buttons stack instead of sitting in a
     row, which is what makes them comfortable to tap. */
  .navbar-menu-top {
    display: none;
    order: 2;
    width: 100%;
    padding: 0.5rem 0 0.75rem;
    background: #fff;
    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
  }

  .navbar-menu-top.is-active {
    display: block;
  }

  .navbar-menu-top .navbar-end,
  .navbar-menu-top .navbar-item {
    margin: 0;
    padding: 0;
  }

  .navbar-menu-top .buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0;
  }

  .navbar-menu-top .buttons .button,
  .navbar-menu-top .buttons form {
    width: 100%;
  }

  .navbar-menu-top .buttons form .button {
    width: 100%;
  }
}

/* ---- toolbar ---------------------------------------------------------- */

.toolbar {
  padding-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

/* Bulma's section padding plus the navbar leaves a large empty band above the
   editor now that the page starts with it; pull the content up a little. */
.page-content {
  padding-top: 3.5rem;
}

/* On a phone the bar is taller (the reserved bands, the bigger logo). The
   content sits closer to the logo than the desktop rule above would put it, so
   the tool reads as part of the same block. This comes after the rule above on
   purpose: same specificity, so the later one wins inside the width it applies
   to. */
@media screen and (max-width: 1023px) {
  .page-content {
    padding-top: 2rem;
  }
}

/* Account pages carry no header or footer (see pageData.Minimal), so there is
   no navbar to clear: the content starts near the top of the window, centred
   vertically on a tall screen so the form does not sit stranded at the top. */
.main-minimal {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-minimal .page-content {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.toolbar-buttons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* The Smart toggle is for paid accounts only, and app.js hides it with the
   hidden attribute. Bulma sets display on .button, and an author display rule
   wins over the browser's [hidden] rule, so the attribute alone would leave the
   button on screen: this restores what hidden means. The same reason the clear
   cross and the error line repeat their own [hidden] rule below. */
.check-smart[hidden] {
  display: none;
}

.check-smart-icon {
  margin-right: 0.3em;
}

/* The language menu is a rounded pill like the buttons beside it. Bulma's
   is-rounded already rounds the inner select; the wrapper is rounded too so no
   square corner shows behind it, and the right padding is restored so the arrow
   never sits on the text. */
.select.is-rounded {
  border-radius: 9999px;
  overflow: hidden;
}

.select.is-rounded select {
  padding-right: 2.5em;
}

/* On a narrow screen the menu is capped so "Check now" keeps it company on the
   same line: a select is as wide as its longest option ("Portuguese (Moçambique
   preAO)"), which is far more than the row has. The menu takes the room left
   over, never less than a readable amount, and the buttons keep their size.
   The text of a long option is clipped by the select itself; the arrow and the
   pill's rounding are unaffected. */
@media screen and (max-width: 1023px) {
  .toolbar {
    flex-wrap: nowrap;
  }

  .toolbar > .select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60%;
  }

  .toolbar > .select select {
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
  }

  .toolbar-buttons {
    flex: 0 0 auto;
  }
}

/* "Check now" is a muted grey pill, the same family as "Sign up": the tool is
   meant to read like a printed page, so the controls stay quiet and only the
   text is loud. A faint border keeps it recognisable as a button. */
#check-refresh {
  border-color: #dbdbdb;
  color: #4a4a4a;
}

/* ---- editor ----------------------------------------------------------- */

/* The mirror and the textarea must be laid out identically: same font, same
   padding, same border width, same wrapping. Only the colours differ. Any
   difference makes marks drift from the words under them. */

/* The editor is a Bulma `.box` (see the templates) with the old Correctme box
   styling: white card, 6px radius and a soft drop shadow. The box's padding is
   undone here because the mirror must be positioned inside the same box as
   the textarea; the text layers carry the padding themselves (see below), so
   the marks stay on the words. The 1px shadow ring doubles as the border, so
   no border is drawn that could shift the text. */
/* The editor box itself carries no padding and no border: the textarea fills
   it to the edges, and the space around the text is the textarea's own padding.
   Only the bottom margin separates the box from what follows. */
.editor {
  position: relative;
  padding: 0;
  margin-bottom: 0.5rem;
  border-radius: 6px;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
    0 0 0 1px rgba(10, 10, 10, 0.02);
}

.editor:focus-within {
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
    0 0 0 0.125em rgba(50, 115, 220, 0.25);
}

.editor-mirror,
.editor-input {
  margin: 0;
  /* The right side keeps room for the clear cross in the top corner and the
     copy icon in the bottom one; both layers take the same padding so the
     marks stay on the words. The bottom padding is smaller than the top: the
     textarea's min-height already leaves visible slack under a short text, so
     a full 1.25rem there reads as an empty strip inside the box. */
  padding: 1.25rem 2.5rem 0.6rem 1.25rem;
  font-family: inherit;
  /* The one deliberate exception to the uniform size: the text being
     corrected is what people read most closely, so it stays slightly larger
     than the rest of the site. Both layers share this value. */
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: normal;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  border: 0;
  background: transparent;
}

.editor-mirror {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  pointer-events: none;
  user-select: none;
}

.editor-input {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: 10rem;
  color: #363636;
  caret-color: #363636;
  resize: none;
  outline: none;
}

.editor-input::placeholder {
  color: #b5b5b5;
}

/* Correction kinds. Colours match the original Correctme app: grammar is the
   default pink, spelling red, typography green, casing blue, style muted.
   The mirror's text is transparent, so only these underlines show through the
   textarea above it; the word itself must stay transparent too, including its
   background, or every marked word would look highlighted. */
.editor-mirror mark {
  color: transparent;
  background: none;
  border-bottom: 3px solid #ff99ab;
  border-radius: 0;
}

.editor-mirror mark.kind-spelling { border-bottom-color: #ff3860; }
.editor-mirror mark.kind-typography { border-bottom-color: #23d160; }
.editor-mirror mark.kind-casing { border-bottom-color: #209cee; }
.editor-mirror mark.kind-style,
.editor-mirror mark.kind-tone {
  border-bottom-style: dashed;
  border-bottom-color: #b5b5b5;
}

.editor-mirror mark.is-active {
  background: rgba(255, 221, 87, 0.45);
}

/* A failed check is shown on the editor itself: the box takes a red frame and
   the reason is stated in red beneath it. The frame sits on the .editor box,
   so the text inside does not move. */
.editor-error,
.editor-error:focus-within {
  box-shadow: 0 0.5em 1em -0.125em rgba(255, 56, 96, 0.15),
    0 0 0 1px #ff3860;
}

/* The error message sits right above the box. It always keeps its one line of
   height, whether or not there is an error, so the box below never jumps; the
   text is clipped to that line (the full message stays in the title and for
   screen readers). */
.check-error {
  height: 1.2rem;
  margin: 0 0 0.5rem 0.25rem;
  overflow: hidden;
  color: #ff3860;
  font-size: 0.8rem;
  line-height: 1.2rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The hidden attribute must not collapse the reserved line: it is the slot the
   layout keeps, and only the text disappears. */
.check-error[hidden] {
  display: block;
  visibility: hidden;
}

/* The clear cross in the editor's top-right corner, as in the old app. It sits
   above the textarea (which would otherwise take the click) and only appears
   while there is text to clear. */
.editor-clear {
  position: absolute;
  z-index: 2;
  top: 0.35rem;
  right: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #b5b5b5;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

/* The clear button deletes text, so its icon is a warning sign: grey while
   resting, red on hover, which is the colour it will be remembered by. */
.editor-clear .icon-svg {
  width: 1.1rem;
  height: 1.1rem;
}

.editor-clear:hover,
.editor-clear:focus-visible {
  background: #f5f5f5;
  color: #4a4a4a;
}

.editor-clear[hidden] {
  display: none;
}

/* Copy sits in the editor's bottom-right corner as an icon button, mirroring
   the clear cross in the other corner. */
.editor-copy {
  position: absolute;
  z-index: 2;
  right: 0.5rem;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #b5b5b5;
  cursor: pointer;
}

.editor-copy .icon-svg {
  width: 1rem;
  height: 1rem;
}

/* A short confirmation after a copy: green for a moment. */
.editor-copy.is-copied {
  color: #23d160;
}

.editor-copy:hover,
.editor-copy:focus-visible {
  background: #ededed;
  color: #4a4a4a;
}

.editor-copy[hidden] {
  display: none;
}

/* The text itself blinks when copied: a quick fade out and back in, so the
   confirmation is where the user is looking. It is a plain opacity animation,
   so the marks in the mirror fade with the text and stay aligned. Nothing is
   animated when the user asked for reduced motion. */
.editor.is-copied .editor-input,
.editor.is-copied .editor-mirror {
  animation: editor-copied 320ms ease-out;
}

@keyframes editor-copied {
  0% { opacity: 1; }
  35% { opacity: 0.15; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .editor.is-copied .editor-input,
  .editor.is-copied .editor-mirror {
    animation: none;
  }
}

/* ---- suggestion popup ------------------------------------------------- */

/* The popup is absolutely placed inside .checker (which is positioned), so it
   travels with the page as it scrolls and stays next to its word. */
.check-popup {
  position: absolute;
  z-index: 40;
  /* 400px where the page has room, narrower on small screens. app.js keeps its
     left edge inside the editor's column, so it is never cut off at the right. */
  width: 400px;
  max-width: min(400px, calc(100vw - 1rem));
  padding: 1.25rem;
  /* The old Correctme popup floated well above the page. */
  box-shadow: 0 1.3em 2em 0.825em rgba(10, 10, 10, 0.1),
    0 0 0 1px rgba(10, 10, 10, 0.02);
}

/* A hidden popup must not reserve space: the class above sets position, which
   would otherwise override the browser's default for [hidden]. */
.check-popup[hidden] {
  display: none;
}

/* The button that dismisses the popup, pinned to its top-right corner, as in
   the old app. */
.check-popup-close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  line-height: 1;
  font-size: 1.25rem;
}

/* The old popup lead the eye with the sentence, then the underlined word
   struck through, an arrow, and the biggest replacement as one big button. */
/* The headline reads "old → new". Short fixes sit in one row, the replacement
   hugging its text. A long correction (a whole clause) gets `.is-long` from
   app.js and stacks instead, so both blocks can wrap in the popup's width
   rather than squeezing each other into narrow strips. */
.check-popup-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 1.75rem 0.25rem 0;
  min-width: 0;
  font-size: 1rem;
  color: #4a4a4a;
}

.check-popup-headline.is-long {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* The correction kind, stated in words so it does not depend on remembering
   what each underline colour means. The dot repeats the underline colour. */
.check-popup-kind {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 1.75rem 0.875rem 0;
  color: #7a7a7a;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.check-popup-kind-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ff99ab;
}

.check-popup-kind-dot.kind-spelling { background: #ff3860; }
.check-popup-kind-dot.kind-typography { background: #23d160; }
.check-popup-kind-dot.kind-casing { background: #209cee; }
.check-popup-kind-dot.kind-style,
.check-popup-kind-dot.kind-tone { background: #b5b5b5; }

/* Whitespace fixes ("  " → " ") and deletes have nothing visible to show, so
   the headline shows a marked empty slot instead: a dashed box labelled with a
   symbol that can be struck through. Without it the line is just an arrow. */
.check-popup-space {
  display: inline-block;
  min-width: 2.25em;
  padding: 0.2em 0.35em;
  border: 1px dashed #b5b5b5;
  border-radius: 4px;
  color: #7a7a7a;
  font-size: 0.8em;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
}

/* The word being fixed matches the replacement button beside it in size, so the
   headline reads as two equal halves of one change. It takes the button's own
   font size and box, without the blue fill. */
.check-popup-original {
  display: block;
  max-width: 100%;
  min-width: 0;
  padding: 0.3em 0;
  color: #7a7a7a;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: line-through;
  text-decoration-color: #ff3860;
  overflow-wrap: anywhere;
}

/* In the stacked layout the original takes the row so it wraps as prose; in the
   inline one it keeps its natural width and wraps only when it must. */
.check-popup-headline.is-long .check-popup-original {
  width: 100%;
}

/* A whitespace slot is a label, not a crossed-out word: the red strike would
   only smear its dashed box. */
.check-popup-original.check-popup-space {
  text-decoration: none;
}

/* The arrow sits between two boxes of the same height; the flex row of the
   headline centres it on their line rather than on the text baseline. The
   headline's gap provides the spacing, so it has no margin of its own. */
/* The arrow is a small separator between the two halves, never a stretchable
   column; in the stacked layout it keeps to its own line start. */
.check-popup-arrow {
  align-self: flex-start;
  color: #7a7a7a;
  font-size: 0.9rem;
  line-height: 1;
}

.check-popup-headline:not(.is-long) .check-popup-arrow {
  align-self: center;
}

/* A whitespace slot stays inline in the headline stack, so "[· ·]" and "[·]"
   read as one change rather than two blocks. */
.check-popup-headline .check-popup-space {
  display: inline-block;
  padding: 0.2em 0.35em;
}

.check-popup-message {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid #ededed;
  color: #7a7a7a;
  font-size: 0.9rem;
}

.check-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.check-popup-actions .button {
  margin: 0;
}

/* ---- quota bar -------------------------------------------------------- */

.quota {
  margin-top: 1rem;
}

.quota-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
  color: #4a4a4a;
}

.quota-link {
  font-size: 0.8rem;
}

.quota .progress {
  margin: 0.35rem 0 0.25rem;
}

/* ---- pricing ---------------------------------------------------------- */

/* Two cards side by side, narrower than the page: a full-width half-column
   leaves a plan box so wide that the limits become a line of text with empty
   space around it. They keep a comfortable reading width and centre as a pair. */
.plans .column {
  flex: 0 0 auto;
  width: 100%;
  max-width: 26rem;
}

.plan.is-current {
  border: 2px solid #3273dc;
}

/* The "your plan" tag sits at the top right of the card, above the name's
   line. It is absolutely positioned so it occupies no space: the name stays
   exactly where it is on the other card, and the tag cannot push it down. */
.plan-heading {
  position: relative;
  margin-bottom: 1rem;
}

.plan-current {
  position: absolute;
  top: 0;
  right: 0;
}

.plan-heading .plan-name {
  margin-bottom: 0 !important;
}

/* The plan name is the headline of its card: larger than a page section title
   and heavier, so the two plans are distinguishable at a glance.
   The selector outranks the page's uniform `.title { font-size: 1rem
   !important }` rule (two classes against one), or the name would be the same
   size as the body text. */
.title.plan-name {
  margin-bottom: 1rem !important;
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.plan-limits strong {
  color: #363636;
}

/* ---- footer ----------------------------------------------------------- */

/* The link columns are hidden for now (the footer carries only the copyright
   line), but their styles stay: bringing them back is then a change to
   footer.html alone. `.footer-heading` is shared anyway: the admin
   dashboard's summary boxes use it. */

/* All three link columns start further in than the page edge, so the footer's
   links sit in the same reading column as the content above instead of hugging
   the edge. The three columns stay equal, so the shift is uniform and the
   headings keep their alignment with each other. */
.footer-links {
  padding-left: 9rem;
}

/* On a phone or tablet the footer stacks, and 9rem of empty space beside a
   stacked list is just wasted width: the shift belongs to the wide layout,
   where the columns sit side by side. */
@media screen and (max-width: 1023px) {
  .footer-links {
    padding-left: 0;
  }
}

.footer-links ul {
  list-style: none;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.4rem;
}

/* Colour, weight and casing only: the size comes from the uniform typography
   block at the end of this file, like every other text element. */
.footer-heading {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7a7a7a;
  margin: 0 0 0.6rem;
}

.footer-links a {
  color: #4a4a4a;
}

.footer-links a:hover {
  color: #3273dc;
}

/* ---- misc ------------------------------------------------------------- */

.is-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* The copyright credit keeps the muted colour; the link lists have their own
   colour above and must not be forced grey. */
.footer-credit a {
  color: #b5b5b5;
  text-decoration: none;
}

.footer-credit a:hover {
  color: #7a7a7a;
}

/* ---- admin ------------------------------------------------------------ */

.admin-tabs {
  margin-bottom: 1rem;
}

.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  border-radius: 0;
}

/* Bar charts: one column per day, segments stacked from the bottom. The height
   of each segment is a percentage of the busiest day, so bars stay comparable. */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
  padding-top: 0.5rem;
}

.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.chart-bar {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  min-width: 3px;
}

.chart-bar .seg {
  width: 100%;
}

.seg-guest { background: #b5b5b5; }
.seg-free { background: #3298dc; }
.seg-paid { background: #48c774; }
.seg-views { background: #3298dc; }
.seg-visitors { background: #48c774; opacity: 0.85; }
.seg-bot { background: #dbdbdb; }

.chart-label {
  color: #7a7a7a;
  margin-top: 2px;
}

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

/* The checker anchors the suggestion popup: it is positioned, so the popup's
   absolute left/top are measured from it and follow it as the page scrolls. */
.checker {
  position: relative;
}

/* The marketing copy sits below the checker, so it only appears once the
   reader scrolls. The checker stretches to fill the window, minus 100px of
   slack in which the next section's top edge (its 1rem margin and 1px
   border) and the padding under the hint stay out of sight. The editor keeps
   its own height; the wrapper around it takes the slack, and the hint sits
   right under the status lines, so the extra room reads as space below the
   tool rather than a line stranded at the bottom.
   The percentages matter: heights resolved against an auto-sized parent are
   ignored, so the section would otherwise creep back above the fold. */
html,
body,
.main {
  min-height: 100%;
}

/* The checker's content is about 440px, so a window below 900px cannot fit it
   with the space kept back. On such a window - a phone on its side especially -
   there is no honest way to push the section below the fold, so it simply
   follows the editor there. */
@media screen and (min-height: 900px) {
  .checker {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 100px);
    min-height: calc(100dvh - 100px);
  }
}

/* A light band separates the copy from the tool above it. The negative side
   margins cancel the section's own side padding so the colour reaches the page
   edges (below 1024px the section padding is 1.5rem), which is what makes it
   read as a band rather than a floating box. */
.home-intro {
  margin: 1rem calc(-1 * clamp(1.5rem, 3vw, 3rem)) 0;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  background: #fafafa;
  border-top: 1px solid #ededed;
}

@media screen and (max-width: 1023px) {
  /* Bulma's section padding shrinks to 1.5rem on touch widths, so the negative
     margin above must match it exactly or a white stripe appears at both
     edges of the band. */
  .home-intro {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
}

/* Short measure: full-width paragraphs of body text are hard to read. */
.home-intro > p,
.home-intro > .title {
  max-width: 46rem;
}

.home-intro-lead {
  color: #4a4a4a;
  margin-bottom: 2rem;
}

.home-intro-points {
  margin-top: 0;
}

.home-intro-point {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* The closing links are a quiet pointer, not a call to action: the button
   they would compete with is the editor, which is already above. */
.home-intro-more {
  margin-top: 0.5rem;
  color: #7a7a7a;
}

/* ---- typography ------------------------------------------------------- */

/* One typeface and one size for the whole site: the same system font stack and
   the same 1rem as the body text. Bulma scales headings, buttons, tables, help
   text, labels and the `is-size-*` helpers individually; this block, being
   last, overrides all of them.

   Weight, colour and spacing are deliberately kept: a heading is still bold
   and a muted note is still grey, so pages keep their hierarchy. A browser
   zoom is left alone too, as it is the one legitimate way to make text bigger.

   The only exception is the editor, which keeps its slightly larger size (see
   the editor block above). Its textarea and mirror share that one value, which
   is what keeps marks sitting on their words.

   That is also why `textarea` is not in the list below: this block comes after
   the editor's and would otherwise give the textarea a different size from its
   mirror. Inputs, selects and buttons are 1rem in Bulma already. A textarea
   added anywhere else (outside the editor) should be sized too. */

html {
  font-size: 100%;
}

button,
input,
select,
.help,
.label,
.label.is-small,
.title,
.title.is-1, .title.is-2, .title.is-3, .title.is-4,
.title.is-5, .title.is-6, .title.is-7,
.subtitle,
.subtitle.is-1, .subtitle.is-2, .subtitle.is-3, .subtitle.is-4,
.subtitle.is-5, .subtitle.is-6,
.heading,
.footer-heading,
.chart-label,
/* Bulma marks the size helpers `!important`, so the uniform rule needs it too.
   Only the helper actually used is overridden, which keeps the list honest. */
.is-size-7 {
  font-size: 1rem !important;
}

/* Bulma's `is-small` variants shrink the text, so they need the same force.
   Listed by name rather than with a broad [class*="is-small"] selector, which
   would also catch classes whose meaning is not about size. */
.button.is-small,
.button.is-small:not(.is-rounded),
.select.is-small,
.select.is-small ~ .icon,
.is-small.input,
.is-small.textarea {
  font-size: 1rem !important;
}

/* Compact buttons keep a slightly smaller height rather than a smaller font:
   uniform buttons at Bulma's full height would make the toolbar and admin
   tables much taller. Everything else (inputs, selects, labels) stays at its
   normal height so the font remains the only uniform part. */
.button.is-small {
  height: 2.25em;
}

/* Popup buttons are the one exception: it is a small dialog, and full-size
   buttons would fill it. Scoped to the popup so the site keeps one button
   size everywhere else. */
.check-popup .button {
  height: auto;
  padding: 0.35em 0.85em;
  font-size: 0.95rem !important;
}

/* The replacement button. It may never grow past the popup and may shrink
   below its text so the row can wrap; min-width: 0 is what stops flexbox from
   refusing to shrink it. */
.check-popup-headline .button {
  max-width: 100%;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0.35em 0.8em;
  font-size: 1rem !important;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A long replacement takes the whole row under its original and wraps like
   text, left aligned. */
.check-popup-headline.is-long .button {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

/* The whitespace slot is narrow by design: unlike the replacement above, it
   must not be forced to the full width, only wide enough to be visible. */
.check-popup .check-popup-space,
.check-popup .check-popup-headline .button.check-popup-space {
  width: auto;
  min-width: 2.25em;
  padding: 0.2em 0.35em;
  text-align: center;
}

/* ---- admin review ----------------------------------------------------- */

/* The reviewed text is shown the way the user saw it: underlines coloured by
   correction kind. These are the same colours as the editor's marks, but here
   the text stays readable instead of transparent, because there is no textarea
   above it. Keep the two lists in step when a kind colour changes. */
.review-text {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ededed;
  border-radius: 4px;
  background: #fbfbfb;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #363636;
}

.review-text mark {
  color: inherit;
  background: none;
  border-bottom: 3px solid #ff99ab;
  border-radius: 0;
}

.review-text mark.kind-spelling { border-bottom-color: #ff3860; }
.review-text mark.kind-typography { border-bottom-color: #23d160; }
.review-text mark.kind-casing { border-bottom-color: #209cee; }
.review-text mark.kind-style,
.review-text mark.kind-tone { border-bottom-style: dashed; border-bottom-color: #b5b5b5; }

/* Marks are clickable: a pointer on them and a yellow highlight on the one
   whose popup is open, matching the editor's active mark. The text otherwise
   stays a normal paragraph. */
.review-text mark {
  cursor: pointer;
}

.review-text mark:hover,
.review-text mark:focus-visible,
.review-text mark.is-active {
  background: rgba(255, 221, 87, 0.45);
  outline: none;
}

/* The popup: a fixed card under the mark, like the editor's but read-only. */
.review-popup {
  position: fixed;
  z-index: 60;
  width: 24rem;
  max-width: calc(100vw - 1rem);
  padding: 0.85rem 1rem;
  box-shadow: 0 1.3em 2em 0.825em rgba(10, 10, 10, 0.1),
    0 0 0 1px rgba(10, 10, 10, 0.02);
}

.review-popup[hidden] {
  display: none;
}

.review-popup-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.5rem;
  color: #7a7a7a;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.review-popup-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.95rem;
}

.review-popup-message {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid #ededed;
  color: #7a7a7a;
  font-size: 0.85rem;
}

/* The pieces of the correction line, the same shapes the editor's popup used:
   a crossed-out original, a small arrow, and static replacement chips. */
.review-original {
  color: #7a7a7a;
  text-decoration: line-through;
  text-decoration-color: #ff3860;
  overflow-wrap: anywhere;
}

.review-arrow {
  color: #b5b5b5;
}

.review-replacement {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 4px;
  background: #3273dc;
  color: #fff;
  overflow-wrap: anywhere;
}

.review-replacement.is-delete {
  background: #ff3860;
}


/* ---- checking state --------------------------------------------------- */

/* While a check runs, "Check now" shows a small spinner and the word
   "Checking". The label is swapped inside the same button and its width is
   reserved, so the toolbar never shifts when a check starts or ends. */
.check-refresh-spinner,
.check-refresh-waiting {
  display: none;
}

.check-refresh.is-checking .check-refresh-label {
  display: none;
}

.check-refresh.is-checking .check-refresh-spinner {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.5em;
  border: 2px solid #dbdbdb;
  border-top-color: #7a7a7a;
  border-radius: 50%;
  animation: check-spin 0.7s linear infinite;
}

.check-refresh.is-checking .check-refresh-waiting {
  display: inline-block;
}

/* The two labels share one box, so neither the button nor the toolbar moves
   when it changes between them. */
.check-refresh.is-checking {
  min-width: 8.5em;
}

/* A disabled button must not look dead while it is the one reporting progress. */
.check-refresh.is-checking,
.check-refresh.is-checking:disabled {
  opacity: 1;
  cursor: progress;
}

@keyframes check-spin {
  to { transform: rotate(360deg); }
}

/* Reduced motion: a slow pulse instead of a spin, which still says "working"
   without movement that makes some people unwell. */
@keyframes check-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .check-refresh.is-checking .check-refresh-spinner {
    animation: check-pulse 1.2s ease-in-out infinite;
  }
}

/* ---- clear confirmation dialog ---------------------------------------- */

/* The "start again?" card, as the previous site had it: a small box over a
   dimmed page with "No" and a red "Yes". It is a native <dialog>, so the
   browser centres it and traps focus; these rules only give it the look. */
.confirm-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 26rem;
  width: calc(100% - 2rem);
  overflow: visible;
}

/* The dimmed backdrop. A very light scrim: the point is to say "the page is
   waiting", not to hide the text the visitor is being asked about. */
.confirm-dialog::backdrop {
  background: rgba(10, 10, 10, 0.3);
}

.confirm-dialog .box {
  margin-bottom: 0;
  text-align: left;
}

.confirm-dialog p {
  font-size: 1rem;
  color: #4a4a4a;
}

.confirm-dialog hr {
  margin: 1rem 0;
  background-color: #f5f5f5;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* "No" is the quiet button; "Yes" keeps Bulma's danger styling from the
   template, so the destructive choice is the one that looks it. */
.confirm-dialog .button.no {
  background-color: #f5f5f5;
  border-color: transparent;
  color: #4a4a4a;
}

.confirm-dialog .button.no:hover,
.confirm-dialog .button.no:focus-visible {
  background-color: #e8e8e8;
}