/**
 * AI Prompt Optimizer and Variable Injector.
 *
 * Colour is expressed only through the custom properties on .sk-po-page, and
 * dark mode is the single re-point at the top, following the convention the
 * media and QR tool families already use. A hard-coded hex anywhere in this
 * file would opt out of dark mode and fail the contrast audit, so if you add a
 * colour, add a variable for it in both blocks.
 *
 * Three layouts, matching how much room the work needs:
 *   1024px and up   two columns, input and options left, live output right
 *   600px to 1023px one column, with tabs to keep the panels from stacking
 *                   into something ten screens tall
 *   under 600px     one step at a time, Write / Customize / Result, with the
 *                   two actions that matter pinned to the bottom
 */

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */

.sk-po-page {
  --sk-ink: #28323a;
  --sk-muted: #5c6871;
  --sk-accent: #68438b;
  --sk-accent-strong: #452b61;
  --sk-on-accent: #ffffff;
  --sk-accent-bg: #68438b;
  --sk-line: #dfe3e8;
  --sk-surface: #ffffff;
  --sk-soft: #f7f5fa;
  --sk-ok: #1f6b45;
  --sk-warn: #8a5a12;
  --sk-error: #a6324a;
  --sk-shadow: 0 1px 2px rgba(20, 24, 30, 0.06), 0 6px 18px rgba(20, 24, 30, 0.05);

  /* The floor for anything the reader has to read.
   *
   * The brief asked for 16px minimum text. The first version of this file
   * quietly ignored that: thirty-three declarations between 0.72rem and 0.9rem,
   * which is 11.5px to 14.4px, and the smallest was the note under each target
   * button. Twelve of the eighteen pieces of text on the page rendered under
   * 16px, and the labels, counters, hints and chips were the worst of it.
   *
   * It is a floor, not a scale. Everything functional is var(--sk-po-text), and
   * hierarchy comes from weight, colour and the few headings that are larger.
   * Dropping the notes to 12px bought a denser page and a page nobody can read
   * on a phone, which is the opposite of what the requirement was for.
   *
   * It also pairs with the text-size control: the site offers Large and Largest,
   * and every one of those sizes multiplies this, so a visitor who needs bigger
   * text gets bigger text. */
  --sk-po-text: 1rem;

  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 20px 60px;
  color: var(--sk-ink);
  line-height: 1.6;
}

.sk-po-page * {
  box-sizing: border-box;
}

html[data-sk-scheme="dark"] .sk-po-page {
  --sk-ink: #e9edf2;
  --sk-muted: #aab5c1;
  --sk-accent: #c79bf0;
  --sk-accent-strong: #e6cbf8;
  --sk-on-accent: #1a1220;
  --sk-accent-bg: #a679dd;
  --sk-line: #333d48;
  --sk-surface: #222a33;
  --sk-soft: #1a2028;
  --sk-ok: #6fd6a2;
  --sk-warn: #e8bd6a;
  --sk-error: #ff9db2;
  --sk-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* ------------------------------------------------------------------ *
 * Shared bits
 * ------------------------------------------------------------------ */

.sk-po-page h2,
.sk-po-page h3 {
  font-family: inherit;
  color: var(--sk-ink);
}

.sk-po-panel {
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--sk-shadow);
}

.sk-po-panel + .sk-po-panel {
  margin-top: 16px;
}

.sk-po-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.sk-po-panel-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sk-ink);
}

.sk-po-hint {
  margin: 0;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
}

.sk-po-label {
  display: block;
  font-size: var(--sk-po-text);
  font-weight: 700;
  color: var(--sk-ink);
  margin-bottom: 5px;
}

.sk-po-input,
.sk-po-textarea,
.sk-po-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 1rem;
  color: var(--sk-ink);
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
}

.sk-po-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}

.sk-po-input:focus,
.sk-po-textarea:focus,
.sk-po-select:focus,
.sk-po-btn:focus-visible,
.sk-po-chip:focus-visible,
.sk-po-tab:focus-visible,
.sk-po-step:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 2px;
}

.sk-po-btn {
  min-height: 44px;
  padding: 10px 16px;
  font: inherit;
  font-size: var(--sk-po-text);
  font-weight: 600;
  color: var(--sk-ink);
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sk-po-btn:hover {
  border-color: var(--sk-accent);
}

.sk-po-btn-primary {
  color: var(--sk-on-accent);
  background: var(--sk-accent-bg);
  border-color: var(--sk-accent-bg);
}

.sk-po-btn-primary:hover {
  background: var(--sk-accent-strong);
  border-color: var(--sk-accent-strong);
}

.sk-po-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.sk-po-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Status line. One element, four states, the same convention the media tools
 * use so the whole site reports problems the same way. */
.sk-po-status {
  margin: 10px 0 0;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
  min-height: 1.4em;
}

.sk-po-status[data-state="ok"] { color: var(--sk-ok); }
.sk-po-status[data-state="warn"] { color: var(--sk-warn); }
.sk-po-status[data-state="error"] { color: var(--sk-error); }

.sk-po-empty {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  color: var(--sk-muted);
  font-size: var(--sk-po-text);
  background: var(--sk-soft);
  border-radius: 10px;
}

/* Spacing helpers, as classes rather than style attributes.
 *
 * The page markup carries no inline style and no <style> block, deliberately. A
 * body style renders after this stylesheet and wins whatever the cascade says,
 * and an earlier tool on this site learned that the hard way when a body rule
 * beat the dark-mode tokens into 1.17:1 contrast. */
.sk-po-gap-sm { margin-top: 10px; }
.sk-po-gap { margin-top: 20px; }
.sk-po-gap-lg { margin-top: 18px; }

.sk-po-legend {
  padding: 0 0 6px;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
}

/* ------------------------------------------------------------------ *
 * Privacy line
 * ------------------------------------------------------------------ */

.sk-po-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: var(--sk-po-text);
  color: var(--sk-ink);
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
}

.sk-po-privacy svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--sk-ok);
}

/* ------------------------------------------------------------------ *
 * Desktop: two columns
 * ------------------------------------------------------------------ */

.sk-po-layout {
  display: grid;
  gap: 20px;
  align-items: start;
}

@media (min-width: 1024px) {
  .sk-po-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* The output column is the one being read, so it gets the extra width. */
  .sk-po-col-output {
    position: sticky;
    top: 12px;
  }
}

.sk-po-col {
  min-width: 0;
}

/* ------------------------------------------------------------------ *
 * Input
 * ------------------------------------------------------------------ */

.sk-po-counter {
  margin: 6px 0 0;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
  text-align: right;
}

.sk-po-examples {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.sk-po-chip {
  min-height: 34px;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--sk-po-text);
  color: var(--sk-ink);
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 999px;
  cursor: pointer;
}

.sk-po-chip:hover {
  border-color: var(--sk-accent);
  color: var(--sk-accent);
}

/* ------------------------------------------------------------------ *
 * Target selector
 * ------------------------------------------------------------------ */

.sk-po-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sk-po-target {
  display: block;
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  cursor: pointer;
}

.sk-po-target:hover {
  border-color: var(--sk-accent);
}

.sk-po-target[aria-pressed="true"] {
  border-color: var(--sk-accent);
  background: var(--sk-accent);
  color: var(--sk-on-accent);
}

.sk-po-target[aria-pressed="true"] .sk-po-target-note {
  color: var(--sk-on-accent);
  opacity: 0.85;
}

.sk-po-target-name {
  display: block;
  font-size: var(--sk-po-text);
  font-weight: 700;
}

.sk-po-target-note {
  display: block;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
  margin-top: 2px;
}

/* ------------------------------------------------------------------ *
 * Detected intent
 * ------------------------------------------------------------------ */

.sk-po-intent {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
}

.sk-po-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: var(--sk-po-text);
  font-weight: 700;
  color: var(--sk-accent-strong);
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 999px;
}

.sk-po-badge[data-confidence="none"] {
  color: var(--sk-muted);
}

.sk-po-why {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
}

/* ------------------------------------------------------------------ *
 * Variable form
 * ------------------------------------------------------------------ */

.sk-po-fields {
  display: grid;
  gap: 12px;
}

@media (min-width: 480px) {
  .sk-po-fields[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sk-po-field {
  min-width: 0;
}

.sk-po-field-full {
  grid-column: 1 / -1;
}

.sk-po-field-hint {
  margin: 4px 0 0;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
}

/* Only a field the template asked for carries the nudge, so the marker means
   something. See the matching data-required attribute in the interface. */
.sk-po-field[data-required="true"][data-filled="false"] .sk-po-label::after {
  content: " · fill this in";
  color: var(--sk-warn);
  font-weight: 600;
}

.sk-po-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------------ *
 * Toggles
 * ------------------------------------------------------------------ */

.sk-po-toggles {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.sk-po-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
}

.sk-po-toggle + .sk-po-toggle {
  border-top: 1px solid var(--sk-line);
}

.sk-po-toggle input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--sk-accent-bg);
  cursor: pointer;
}

.sk-po-toggle-text {
  min-width: 0;
}

.sk-po-toggle-name {
  display: block;
  font-size: var(--sk-po-text);
  font-weight: 600;
  color: var(--sk-ink);
}

.sk-po-toggle-note {
  display: block;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
}

/* ------------------------------------------------------------------ *
 * Output
 * ------------------------------------------------------------------ */

.sk-po-output {
  margin: 0;
  padding: 14px;
  max-height: 62vh;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--sk-po-text);
  line-height: 1.6;
  color: var(--sk-ink);
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  tab-size: 2;
}

/* The one thing this tool must never do is hide what is still missing. */
.sk-po-output mark {
  padding: 0 3px;
  color: var(--sk-warn);
  background: transparent;
  border: 1px dashed var(--sk-warn);
  border-radius: 4px;
  font-weight: 700;
}

.sk-po-missing {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--sk-po-text);
  color: var(--sk-warn);
}

.sk-po-missing li + li {
  margin-top: 2px;
}

/* ------------------------------------------------------------------ *
 * Quality score
 * ------------------------------------------------------------------ */

.sk-po-scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.sk-po-score {
  padding: 12px;
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
}

.sk-po-score-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.sk-po-score-label {
  font-size: var(--sk-po-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sk-muted);
}

.sk-po-score-value {
  margin-left: auto;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sk-ink);
}

.sk-po-meter {
  height: 6px;
  background: var(--sk-line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.sk-po-meter-fill {
  height: 100%;
  background: var(--sk-ok);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.sk-po-meter-fill[data-band="low"] { background: var(--sk-error); }
.sk-po-meter-fill[data-band="mid"] { background: var(--sk-warn); }
.sk-po-meter-fill[data-band="high"] { background: var(--sk-ok); }

.sk-po-checks {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sk-po-text);
}

.sk-po-checks li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--sk-muted);
}

.sk-po-check-mark {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--sk-ok);
}

.sk-po-checks li[data-pass="false"] .sk-po-check-mark,
.sk-po-checks li[data-pass="false"] {
  color: var(--sk-warn);
}

/* ------------------------------------------------------------------ *
 * Before and after
 * ------------------------------------------------------------------ */

.sk-po-compare {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

@media (min-width: 720px) {
  .sk-po-compare[data-view="split"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sk-po-compare-col {
  min-width: 0;
}

.sk-po-compare-title {
  margin: 0 0 6px;
  font-size: var(--sk-po-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sk-muted);
}

.sk-po-compare-body {
  margin: 0;
  padding: 12px;
  max-height: 240px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--sk-po-text);
  line-height: 1.55;
  color: var(--sk-ink);
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ *
 * Variations
 * ------------------------------------------------------------------ */

.sk-po-variations {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 620px) {
  .sk-po-variations[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sk-po-variation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  text-align: left;
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: var(--sk-ink);
}

.sk-po-variation:hover {
  border-color: var(--sk-accent);
}

.sk-po-variation-label {
  font-size: var(--sk-po-text);
  font-weight: 700;
  color: var(--sk-accent-strong);
}

.sk-po-variation-body {
  font-size: var(--sk-po-text);
  line-height: 1.5;
  color: var(--sk-muted);
  max-height: 8.5em;
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Tabs (tablet and phone)
 * ------------------------------------------------------------------ */

.sk-po-tabs {
  display: none;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sk-line);
  overflow-x: auto;
}

.sk-po-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 14px;
  font: inherit;
  font-size: var(--sk-po-text);
  font-weight: 600;
  color: var(--sk-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.sk-po-tab[aria-selected="true"] {
  color: var(--sk-accent-strong);
  background: var(--sk-soft);
  border-color: var(--sk-line);
}

/* The tabs and the stepper are two shapes of the same navigation, so exactly one
 * may be on screen.
 *
 * A max-width of 1023px on this rule alone showed the tabs on a phone as well,
 * because 390px is also below 1023px. The result was two rows of controls doing
 * the same job, stacked on top of each other. The stepper is the phone shape and
 * takes over from 600px down. */
@media (min-width: 600px) and (max-width: 1023px) {
  .sk-po-tabs {
    display: flex;
  }
}

/* ------------------------------------------------------------------ *
 * Panels shown or hidden by the tabs
 * ------------------------------------------------------------------ */

@media (max-width: 1023px) {
  .sk-po-tabpanel[hidden] {
    display: none;
  }
}

@media (min-width: 1024px) {
  /* No tabs on a wide screen, so nothing may be left hidden. */
  .sk-po-tabpanel[hidden] {
    display: block !important;
  }
}

/* ------------------------------------------------------------------ *
 * Stepper and sticky bar (phone)
 * ------------------------------------------------------------------ */

.sk-po-steps {
  display: none;
  gap: 6px;
  margin-bottom: 14px;
}

.sk-po-step {
  flex: 1 1 0;
  min-height: 44px;
  padding: 8px 6px;
  font: inherit;
  font-size: var(--sk-po-text);
  font-weight: 600;
  color: var(--sk-muted);
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 8px;
  cursor: pointer;
}

.sk-po-step[aria-current="step"] {
  color: var(--sk-on-accent);
  background: var(--sk-accent-bg);
  border-color: var(--sk-accent-bg);
}

.sk-po-stickybar {
  display: none;
  gap: 8px;
  margin-top: 16px;
}

.sk-po-stickybar .sk-po-btn {
  flex: 1 1 0;
}

/* Chips are 34px on a pointer device, where that is a comfortable row of small
   targets. Below 1024px the device is probably being touched, and the target is
   44px. The chip is the most-tapped control on a phone and a tablet: the four
   examples, the intent picker, the library filter and the presets are all
   chips. The rule is extended past the 600px stepper breakpoint on purpose,
   because an 820px tablet in portrait is a touch device too. */
@media (max-width: 1023px) {
  .sk-po-chip {
    min-height: 44px;
    padding: 10px 14px;
  }
}

@media (max-width: 599px) {
  .sk-po-steps {
    display: flex;
  }

  .sk-po-stickybar {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 10px 0;
    background: var(--sk-surface);
    border-top: 1px solid var(--sk-line);
  }

  /* Room for the sticky bar, so its own buttons never cover the last control. */
  .sk-po-page {
    padding-bottom: 96px;
  }

  .sk-po-output {
    max-height: none;
  }
}

/* ------------------------------------------------------------------ *
 * Template library
 * ------------------------------------------------------------------ */

.sk-po-library-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.sk-po-templates {
  display: grid;
  gap: 10px;
}

@media (min-width: 620px) {
  .sk-po-templates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sk-po-templates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Cap the two reference panels on a wide screen.
   *
   * With all 22 templates in a single column the right-hand side ran to roughly
   * three times the height of the left, so the two-column layout that exists to
   * avoid endless stacking was itself the thing stacking: about five thousand
   * pixels, with a hand's width of empty space down the left-hand side. The list
   * scrolls inside its panel instead, and the left column ends roughly where the
   * right one does. */
  .sk-po-templates {
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
  }

  .sk-po-history {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
  }
}

.sk-po-template {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
}

.sk-po-template-name {
  margin: 0;
  font-size: var(--sk-po-text);
  font-weight: 700;
  color: var(--sk-ink);
}

.sk-po-template-sum {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
}

.sk-po-template-group {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: var(--sk-po-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sk-accent-strong);
  border: 1px solid var(--sk-line);
  border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * History and presets
 * ------------------------------------------------------------------ */

.sk-po-history {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sk-po-history-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
}

.sk-po-history-body {
  flex: 1 1 auto;
  min-width: 0;
}

.sk-po-history-input {
  margin: 0 0 3px;
  font-size: var(--sk-po-text);
  font-weight: 600;
  color: var(--sk-ink);
  overflow-wrap: break-word;
}

.sk-po-history-meta {
  margin: 0;
  font-size: var(--sk-po-text);
  color: var(--sk-muted);
}

.sk-po-history-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.sk-po-iconbtn {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 8px;
  font: inherit;
  font-size: var(--sk-po-text);
  color: var(--sk-ink);
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: 8px;
  cursor: pointer;
}

.sk-po-iconbtn:hover {
  border-color: var(--sk-accent);
  color: var(--sk-accent);
}

.sk-po-storage-warning {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: var(--sk-po-text);
  color: var(--sk-warn);
  background: var(--sk-soft);
  border: 1px solid var(--sk-line);
  border-radius: 10px;
}

/* ------------------------------------------------------------------ *
 * Focus visibility for keyboard users
 * ------------------------------------------------------------------ */

.sk-po-page :focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sk-po-page * {
    transition: none !important;
    animation: none !important;
  }
}