/* On-screen calculator (#1698): the floating panel the student drags by its title bar. Simple and Scientific (#1762) look like a
   Casio fx-82AU: an LCD display above small function keys and large digit keys, all in the panel. Minimum Standards and NAPLAN
   (#1754) draw their own keys to match the printed calculators. The colours are fixed to those devices, so they are local
   properties, not theme tokens. */
@layer components {
  /* Placed with a translate from the top left corner, like the measuring tools. */
  .calculator-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    inline-size: min(20rem, calc(100vw - 2rem));
    inset: 0 auto auto 0;
    position: fixed;
    z-index: 1000;

    &[hidden] { display: none; }
  }

  .calculator-titlebar {
    align-items: center;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: grab;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    touch-action: none;
    user-select: none;

    &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
    &:active { cursor: grabbing; }
  }
  .calculator-title { flex: 1; font-weight: 600; }

  .calculator-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);

    &[hidden] { display: none; }
  }

  .calculator-input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1.4rem;
    inline-size: 100%;
    padding: var(--space-3) var(--space-4);
  }

  .calculator-result {
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-block-size: 2.2rem;
    overflow-wrap: anywhere;
    text-align: end;
  }

  .calculator-main { display: flex; flex-direction: column; gap: var(--space-4); &[hidden] { display: none; } }

  /* Statistics view (#1758): the data table scrolls, the results stay in view. */
  .calculator-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    &[hidden] { display: none; }

    .calculator-stats-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .calculator-stats-table { max-block-size: 11rem; overflow-y: auto; }
    caption { block-size: 1px; overflow: hidden; position: absolute; }
    td, th { padding: var(--space-1); text-align: center; text-transform: none; }
    input {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      font: inherit;
      font-variant-numeric: tabular-nums;
      inline-size: 100%;
      min-inline-size: 4rem;
      padding: var(--space-1) var(--space-2);

      &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
    }
    .calculator-stats-results {
      display: grid;
      font-variant-numeric: tabular-nums;
      gap: var(--space-1) var(--space-4);
      grid-template-columns: 1fr 1fr;
      margin: 0;

      & div { align-items: baseline; display: flex; gap: var(--space-2); justify-content: space-between; }
      & dt { font-style: italic; }
      & dd { font-weight: 600; margin: 0; overflow-wrap: anywhere; }
    }
  }

  /* Simple and Scientific: dark body, LCD display (input line, then the right-aligned result), five columns of keys. */
  .calculator-panel[data-device="casio"] {
    --calc-body: oklch(0.26 0.01 250);
    --calc-lcd: oklch(0.85 0.04 125);
    --calc-lcd-ink: oklch(0.2 0.02 125);
    --calc-small: oklch(0.38 0.01 250);
    --calc-digit: oklch(0.93 0.005 250);
    --calc-op: oklch(0.45 0.01 250);
    --calc-del: oklch(0.55 0.14 250);
    --calc-ac: oklch(0.62 0.17 45);
    --calc-light: oklch(0.96 0 0);
    background: var(--calc-body);
    border-color: oklch(0.15 0.01 250);
    color: var(--calc-light);
    inline-size: min(20rem, calc(100vw - 2rem));

    .calculator-titlebar { background: oklch(0.2 0.01 250); color: var(--calc-light); }
    .calculator-titlebar .btn { color: var(--calc-light); }
    .calculator-body { gap: var(--space-3); padding: var(--space-3); }
    .calculator-main { gap: var(--space-3); }
    .calculator-lcd {
      background: var(--calc-lcd);
      border: 2px solid oklch(0.15 0.01 250);
      border-radius: var(--radius-sm);
      color: var(--calc-lcd-ink);
      padding: var(--space-2) var(--space-3);
    }
    .calculator-input {
      background: none;
      border: 0;
      color: inherit;
      font-size: 1.2rem;
      padding: 0;

      &::part(virtual-keyboard-toggle), &::part(menu-toggle) { display: none; }
    }
    .calculator-result { color: inherit; min-block-size: 2rem; }
    .calculator-stats { background: var(--color-surface); border-radius: var(--radius-sm); color: var(--color-text); padding: var(--space-2); }

    .calculator-keys { display: grid; gap: var(--space-2); grid-template-columns: repeat(5, 1fr); }
    .calculator-key {
      background: var(--calc-op);
      block-size: 2.7rem;
      border: 0;
      border-radius: var(--radius-sm);
      box-shadow: 0 2px 0 oklch(0.12 0.01 250);
      color: var(--calc-light);
      cursor: pointer;
      font: inherit;
      font-size: 1.15rem;
      font-weight: 700;
      min-inline-size: 0;
      padding: 0;

      &[data-small] { background: var(--calc-small); block-size: 1.9rem; font-size: 0.8rem; font-weight: 600; }
      &[data-kind="digit"] { background: var(--calc-digit); color: oklch(0.15 0 0); }
      &[data-kind="del"] { background: var(--calc-del); color: var(--calc-light); }
      &[data-kind="del"][data-command="clear"] { background: var(--calc-ac); }
      &[data-kind="equals"] { background: oklch(0.15 0.01 250); }
      &:active { box-shadow: none; transform: translateY(2px); }
      &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
      & sup { font-size: 0.7em; }
    }
  }

  /* Keypad modes: real buttons in a four column grid. The titlebar is the drag handle and holds the close button. */
  .calculator-panel[data-mode] {
    overflow: hidden;

    .calculator-keypad { display: grid; grid-template-columns: repeat(4, 1fr); }
    .calculator-key {
      border: 0;
      color: var(--calc-ink);
      cursor: pointer;
      font: inherit;
      font-size: 1.3rem;
      padding: 0;

      &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
    }
    .calculator-display { align-items: center; display: flex; justify-content: flex-end; min-inline-size: 0; position: relative; }
    .calculator-result {
      font-variant-numeric: tabular-nums;
      min-block-size: 0;
      overflow-wrap: anywhere;
      padding-inline: var(--space-3);
    }
    .calculator-memory { font-size: 0.8rem; font-weight: 700; inset: 0.3rem auto auto 0.5rem; position: absolute; }
    .calculator-close { background: none; border: 0; color: var(--calc-close); cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0 var(--space-2); }
    .calculator-titlebar { padding: 0 var(--space-2); }
  }

  /* HSC Minimum Standards: flat, square, grey. */
  .calculator-panel[data-mode="minimum_standards"] {
    --calc-ink: oklch(0.15 0 0);
    --calc-close: oklch(0.72 0 0);
    border: 2px solid oklch(0.38 0 0);
    border-radius: 0;
    box-shadow: var(--shadow-md);
    inline-size: min(15.5rem, calc(100vw - 2rem));

    .calculator-titlebar { background: oklch(0.38 0 0); block-size: 2rem; border-radius: 0; }
    .calculator-grip {
      color: oklch(0.65 0 0);
      flex: 1;
      font-size: 0.9rem;
      letter-spacing: 0.15em;
      text-align: center;

      &::before { content: "\2022\2022\2022\2022"; }
    }
    .calculator-keypad { background: oklch(0.88 0 0); gap: 2px; }
    .calculator-key { aspect-ratio: 1; background: oklch(0.99 0 0); &[data-kind="op"] { background: oklch(0.92 0 0); } }
    .calculator-display { background: oklch(1 0 0); font-size: 1.4rem; grid-column: span 3; }
    .calculator-memory { display: none; }
  }

  /* NAPLAN: navy body, light display, rounded keys with a darker bottom edge. */
  .calculator-panel[data-mode="naplan"] {
    --calc-ink: oklch(0.43 0.09 250);
    --calc-close: oklch(0.85 0.04 250);
    background: oklch(0.43 0.09 250);
    border: 2px solid oklch(0.93 0.01 250);
    border-radius: 1.25rem;
    box-shadow: 0 6px 0 oklch(0.30 0.07 250), var(--shadow-md);
    font-family: Arial, Helvetica, sans-serif;
    inline-size: min(19rem, calc(100vw - 2rem));
    overflow: visible;
    padding-block-end: var(--space-4);

    .calculator-titlebar { background: none; block-size: 1.6rem; justify-content: flex-end; }
    .calculator-keypad { gap: 0.6rem; padding-inline: var(--space-4); }
    .calculator-display {
      background: linear-gradient(oklch(0.98 0 0) 55%, oklch(0.91 0 0));
      block-size: 5.8rem;
      border-radius: 0.3rem;
      color: oklch(0.2 0 0);
      font-size: 1.6rem;
      grid-column: 1 / -1;
      margin-block-end: var(--space-1);
    }
    .calculator-key {
      background: oklch(0.96 0.01 290);
      block-size: 2.6rem;
      border: 2px solid oklch(0.85 0.05 240);
      border-radius: 0.4rem;
      box-shadow: 0 4px 0 oklch(0.65 0.04 240);
      font-size: 1.15rem;
      font-weight: 700;

      &[data-kind="digit"] { background: oklch(0.88 0.05 240); }
      &:where([data-key="÷"], [data-key="×"], [data-key="+"], [data-key="-"], [data-key="="]) { font-size: 1.6rem; font-weight: 400; }
      &[data-key="√"] { font-size: 1.7rem; }
      &:active { box-shadow: 0 1px 0 oklch(0.65 0.04 240); transform: translateY(3px); }
      & i { font-family: "Times New Roman", serif; font-size: 1.5rem; font-weight: 700; }
      & sup { font-size: 0.7em; }
    }
  }
}