/* PaperTek design tokens as CSS variables (redesign «dempet PaperTek», 18.10.2026).
   The same values as the pt.* colours in tailwind.config.js; this file is for
   inline style blocks and the few film-like details Tailwind cannot express.
   Source: the owner's INSTRUKSJON.md §2 + the PaperTek design profile; the
   helper tones marked «avklares» are listed in docs/redesign-mangler.md §3. */
:root {
  --pt-deep-nordic-teal: #0B3E44;
  --pt-digital-teal: #11B49A;
  --pt-nordic-turquoise: #137A88;
  --pt-soft-lime: #D6F07D;
  --pt-soft-lime-200: #E6F6A6;
  --pt-digital-teal-200: #B0E3D7;

  --pt-paper-white: #FAFCFB;
  --pt-white: #FFFFFF;
  --pt-sunk: #F1F6F5;          /* avklares */
  --pt-line: #DCE6E4;          /* avklares */
  --pt-line-strong: #B5C9C6;   /* avklares */

  --pt-ink: #14383C;
  --pt-heading: #0B3E44;
  --pt-ink-2: #536B6B;
  --pt-sender: #59646D;
  --pt-link: #0D515D;

  --pt-positive: #28733B;
  --pt-warning: #D3A000;
  --pt-negative: #B13D4A;

  --pt-digital-flow: linear-gradient(90deg, #137A88, #11B49A, #D6F07D);

  --pt-radius-card: 12px;
  --pt-radius-ctl: 8px;
  --pt-radius-chip: 6px;

  --pt-font: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --pt-font-editorial: Georgia, "Times New Roman", serif;
}

/* The 2 px Digital Flow line at the very top of a page (§3.2). Decorative. */
.pt-flow-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pt-digital-flow);
  pointer-events: none;
}

/* Start and transition pages (role choice, code entry, before start, delivered):
   the Digital Flow colours as a toned surface on Paper White (INSTRUKSJON §3.4).
   «Bekreft bruken» — listed in docs/redesign-mangler.md §3 until the owner confirms.
   Never in the writing view, the test view, the fullscreen code or dialogs. */
.pt-flow-bg {
  background:
    radial-gradient(1100px 700px at 100% 0%, rgba(17, 180, 154, .26), rgba(17, 180, 154, 0) 62%),
    radial-gradient(900px 640px at 0% 100%, rgba(214, 240, 125, .45), rgba(214, 240, 125, 0) 60%),
    linear-gradient(150deg, #FAFCFB 0%, rgba(165, 211, 214, .38) 100%),
    #FAFCFB;
  background-attachment: fixed;
}

/* A start or transition screen marks its root with data-pt-surface="flow"
   (pupil code entry first, 19.10.2026); the page gets the tint only while that
   screen is in the DOM. The writing view never has the marker, so it never
   gets a gradient (§3.12). Without :has the page stays plain. */
body:has([data-pt-surface="flow"]) {
  background:
    radial-gradient(1100px 700px at 100% 0%, rgba(17, 180, 154, .26), rgba(17, 180, 154, 0) 62%),
    radial-gradient(900px 640px at 0% 100%, rgba(214, 240, 125, .45), rgba(214, 240, 125, 0) 60%),
    linear-gradient(150deg, #FAFCFB 0%, rgba(165, 211, 214, .38) 100%),
    #FAFCFB;
  background-attachment: fixed;
}

/* The one editorial line per page (Georgia italic, §3.2/§3.7). */
.pt-editorial {
  font-family: var(--pt-font-editorial);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* Visible focus everywhere (§2): 3 px Nordic Turquoise, 2 px offset. */
.pt-focus:focus-visible {
  outline: 3px solid var(--pt-nordic-turquoise);
  outline-offset: 2px;
}

/* ── Components of the calm style (teacher overview first, step 3, 19.10.2026).
   Shared so the later page areas look the same; INSTRUKSJON §3 + §4.2. ── */

/* White card, 1 px line, radius 12, no shadow (§3.1). */
.pt-card {
  background: var(--pt-white);
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius-card);
}

/* Access and info banners: a white card with a 4 px Nordic Turquoise line on
   the left (§3.10). No light blue or mint boxes. */
.pt-banner {
  background: var(--pt-white);
  border: 1px solid var(--pt-line);
  border-left: 4px solid var(--pt-nordic-turquoise);
  border-radius: var(--pt-radius-card);
  padding: 16px 20px;
  color: var(--pt-ink);
}

/* Smaller padding for a banner inside a card; a quieter grey line for the
   second of two side-by-side notes (it must not outshout the first). */
.pt-banner-compact { padding: 8px 12px; }
.pt-banner-quiet { border-left-color: var(--pt-line-strong); }

/* H2: Arial bold 20 px, Nordic Turquoise (§3.7). */
.pt-h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--pt-nordic-turquoise);
}

/* Buttons (§3.5/§3.6). One primary per screen; danger = secondary with
   Negative text, always behind a confirmation. */
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--pt-radius-ctl);
  border: 1px solid transparent;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.pt-btn:focus-visible {
  outline: 3px solid var(--pt-nordic-turquoise);
  outline-offset: 2px;
}
.pt-btn:disabled,
.pt-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
.pt-btn-primary { background: var(--pt-deep-nordic-teal); color: var(--pt-white); }
.pt-btn-primary:hover:not(:disabled) { background: var(--pt-link); }
.pt-btn-secondary,
.pt-btn-danger { background: var(--pt-white); border-color: var(--pt-line-strong); color: var(--pt-deep-nordic-teal); }
.pt-btn-danger { color: var(--pt-negative); }
/* A bulk action that has finished: the same button, its result in Positive text. */
.pt-btn-done { color: var(--pt-positive); }
.pt-btn-secondary:hover:not(:disabled),
.pt-btn-danger:hover:not(:disabled) { background: var(--pt-sunk); }
/* No frame: an icon-only control next to the thing it acts on (the title's pencil). */
.pt-btn-quiet { background: transparent; color: var(--pt-deep-nordic-teal); }
.pt-btn-quiet:hover:not(:disabled) { background: var(--pt-sunk); }
/* Sizes. Tailwind's text size, min-height and padding utilities LOSE to
   .pt-btn (this file loads after app.css), so a button's size is always one
   of these modifiers. */
.pt-btn-lg { min-height: 48px; padding: 0 24px; font-size: 1rem; }
/* The compact size for buttons inside a list row. */
.pt-btn-sm { min-height: 36px; padding: 0 14px; }
/* A square icon-only button (the row's arrow); needs an aria-label. */
.pt-btn-icon { min-height: 40px; min-width: 40px; padding: 0; }
.pt-btn-sm.pt-btn-icon { min-height: 36px; min-width: 36px; }

/* The writing view's quiet controls (§3.12): text buttons, no fill, no frame. */
.pt-quiet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--pt-radius-ctl);
  font-size: .8125rem; font-weight: 700; color: var(--pt-deep-nordic-teal);
  background: transparent; border: 0; cursor: pointer;
}
.pt-quiet:hover { background: var(--pt-sunk); }
.pt-quiet:focus-visible { outline: 3px solid var(--pt-nordic-turquoise); outline-offset: 2px; }
.pt-quiet.hidden, .pt-quiet[hidden] { display: none; }
/* Desktop only (the writing view's «Skjul oppgave»): Tailwind's
   `hidden sm:inline-flex` cannot do this — `.pt-quiet.hidden` above beats
   `sm:inline-flex`, so the button vanished on desktop too (19.10.2026). */
@media (max-width: 639.98px) { .pt-quiet.pt-sm-up { display: none; } }

/* The task text in the writing view (§4.6): Georgia italic, 16 px. */
.pt-task-text {
  font-family: var(--pt-font-editorial);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pt-ink);
}

/* The writing view's save state (§4.6). snapshot-timer.js and
   unconfirmed-save-warning.js switch Tailwind colour classes, and their tests
   pin those names as the state; the tokens restyle the states here instead:
   saved = Positive, then secondary text; not saved = Negative marker + text. */
#save-indicator.text-emerald-600 { color: var(--pt-positive); }
#save-indicator.text-gray-500 { color: var(--pt-ink-2); }
#save-indicator.text-red-500 { color: var(--pt-negative); font-weight: 700; }
#save-indicator.text-red-500::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  background: var(--pt-negative); margin-right: 6px; vertical-align: 0;
}
@media (prefers-reduced-motion: reduce) {
  #save-indicator.save-pulse { animation: none; }
}

/* A source-reference marker in the pupil's text (student/source-references-ui.js):
   [1], [2] … — not editable itself; a click opens the source. */
#writing-editor .pt-ref-marker {
  /* Colour only, never bold: a bold marker made the toolbar's «B» light up
     for the caret beside it. */
  color: var(--pt-link);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 3px;
}
#writing-editor .pt-ref-marker:hover { background: var(--pt-sunk); }

/* Text buttons and links: underlined (§3.5). */
.pt-link {
  color: var(--pt-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pt-link:hover { color: var(--pt-deep-nordic-teal); }
.pt-link:focus-visible {
  outline: 3px solid var(--pt-nordic-turquoise);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Form fields: 1 px strong line, radius 8, the turquoise focus ring. */
.pt-input {
  width: 100%;
  background: var(--pt-white);
  border: 1px solid var(--pt-line-strong);
  border-radius: var(--pt-radius-ctl);
  padding: 10px 14px;
  color: var(--pt-ink);
}
.pt-input::placeholder { color: var(--pt-ink-2); opacity: .85; }
.pt-input:focus {
  outline: 3px solid var(--pt-nordic-turquoise);
  outline-offset: 1px;
  border-color: var(--pt-nordic-turquoise);
}

/* The pupil's code field (§4.5): big, spaced letters in Arial bold. */
.pt-code-input {
  font-family: var(--pt-font);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: .3em;
  color: var(--pt-deep-nordic-teal);
}
.pt-code-input::placeholder { letter-spacing: .3em; }

/* The test code chip (§3.9): Arial bold, spaced, sunk surface, radius 6. */
.pt-chip {
  display: inline-block;
  font-family: var(--pt-font);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .12em;
  line-height: 1.5;
  padding: 1px 8px;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius-chip);
  background: var(--pt-sunk);
  color: var(--pt-deep-nordic-teal);
}
button.pt-chip { cursor: pointer; }
button.pt-chip:hover { border-color: var(--pt-line-strong); }
button.pt-chip:focus-visible {
  outline: 3px solid var(--pt-nordic-turquoise);
  outline-offset: 2px;
}

/* Status = a small square marker + text, never colour alone (§3.8). */
.pt-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--pt-ink);
}
.pt-status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--pt-line-strong);
}
.pt-status-active::before { background: var(--pt-digital-teal); box-shadow: 0 0 0 3px var(--pt-digital-teal-200); }
.pt-status-waiting::before { background: transparent; border: 2px solid var(--pt-nordic-turquoise); width: 10px; height: 10px; }
.pt-status-done::before { background: var(--pt-positive); }
.pt-status-away::before { background: var(--pt-warning); }
.pt-status-negative::before { background: var(--pt-negative); }
.pt-status-closed { font-weight: 400; color: var(--pt-ink-2); }

/* A fold row (§4.3 point 4, §4.2 Innstillinger): bold text, a chevron that
   turns when open. Works on <details>/<summary> and on a button that gets
   .pt-fold-open from its own script. */
.pt-fold-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--pt-deep-nordic-teal);
  cursor: pointer;
  list-style: none;
  user-select: none;
  text-align: left;
}
.pt-fold-summary::-webkit-details-marker { display: none; }
.pt-fold-summary:focus-visible {
  outline: 3px solid var(--pt-nordic-turquoise);
  outline-offset: 2px;
  border-radius: 4px;
}
.pt-fold-chevron { transition: transform .15s; }
details[open] > .pt-fold-summary .pt-fold-chevron,
.pt-fold-open .pt-fold-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .pt-fold-chevron { transition: none; } }

/* Locked content (§3.11): dashed strong line on the sunk surface. A card
   inside it loses its own frame, so the dashed line is the only edge. */
.pt-locked {
  border: 1px dashed var(--pt-line-strong);
  border-radius: var(--pt-radius-card);
  background: var(--pt-sunk);
}
.pt-locked .pt-card { border-color: transparent; background: transparent; }

/* The code in fullscreen (§3.9, §4.4): an eyebrow with a short line in front,
   the code in Arial bold Deep Nordic Teal, a 4 px Digital Flow line under it.
   .pt-code-closed (on the overlay) greys all three for a closed test. */
.pt-code-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pt-nordic-turquoise);
}
.pt-code-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}
.pt-code-big {
  font-family: var(--pt-font);
  font-weight: 700;
  font-size: clamp(4.5rem, 14vw, 10rem);
  line-height: 1;
  letter-spacing: .14em;
  margin-right: -.14em; /* the last letter's spacing would push the code off centre */
  color: var(--pt-deep-nordic-teal);
}
.pt-code-line {
  width: min(720px, 80vw);
  height: 4px;
  margin-top: 28px;
  border-radius: 2px;
  background: var(--pt-digital-flow);
}
.pt-code-closed .pt-code-eyebrow,
.pt-code-closed .pt-code-big { color: var(--pt-ink-2); }
.pt-code-closed .pt-code-line { background: var(--pt-line-strong); }

/* This file loads after app.css, so a component's own display would beat
   Tailwind's .hidden and the [hidden] attribute at equal specificity — the
   code screen showed «Reaktiver» on an active code. Hidden always wins. */
.pt-btn.hidden, .pt-chip.hidden, .pt-status.hidden, .pt-code-eyebrow.hidden, .pt-icon.hidden, .pt-fold-summary.hidden,
.pt-btn[hidden], .pt-chip[hidden], .pt-status[hidden], .pt-code-eyebrow[hidden], .pt-icon[hidden], .pt-fold-summary[hidden] { display: none; }

/* Icons from shared/pt-icons.js sit on the text baseline next to their label. */
.pt-icon {
  display: inline-block;
  vertical-align: -0.2em;
  flex-shrink: 0;
}

@media print {
  .pt-flow-line { display: none; }
}