/*
 * ui-components.css – shared design of the Oneware tools.
 * Theme: <html data-theme="light|dark"> (set by theme-init.js / theme.js).
 * Per-tool accent: override both variants after the import, e.g.
 *   :root { --accent-l: #c2410c; --accent-d: #f0a07a; }
 */
/* Device layouts: sizes, spacing and touch targets live in separate files */
@import url("ui-desktop.css") (min-width: 721px);
@import url("ui-mobile.css") (max-width: 720px);

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Light theme: more saturated colours */
  color-scheme: light;
  --accent-l: #2433e8;         /* per-tool override: set --accent-l and --accent-d */
  --accent-d: #93a0ff;
  --accent: var(--accent-l);
  --accent-ink: #ffffff;
  --bg: #eef0ee;               /* cool paper */
  --surface: #fbfbfa;
  --text: #16191d;
  --text-muted: #5d646b;
  --border: #cfd4d1;
  --success: #07793c;
  --warning: #a84a08;
  --danger: #c81e1e;

  /* Typography */
  --font-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size: var(--fs-body);
  --line-height: 1.55;

  /* Spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96 px) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  /* Type scale (sizes for display/h1 are set per device in ui-desktop.css / ui-mobile.css) */
  --fs-h2: 1.5rem; --fs-h3: 1.2rem; --fs-body: 1.0625rem; --fs-small: .9rem;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* license keys, numbers */

  /* Layout */
  --radius: 12px;          /* controls, small surfaces */
  --radius-lg: 16px;       /* cards, panels */
  --dur: 180ms;            /* motion: 150-250 ms */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-sm: 0 1px 2px rgb(22 25 29 / .06);
  --shadow-md: 0 6px 16px -6px rgb(22 25 29 / .16), 0 1px 3px rgb(22 25 29 / .08);
  --space: 1rem;
  --measure-text: 38rem;   /* reading text */
  --measure: 72rem;        /* site pages and tools (max ~1150px) */
  --measure-wide: 76rem;   /* wide tools (two columns from 1100px) */
}

/* Dark theme: softer, less saturated colours */
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: var(--accent-d);
  --accent-ink: #0f1226;
  --bg: #121416;
  --surface: #1a1d20;
  --text: #e8eae9;
  --text-muted: #9aa1a7;
  --border: #2d3237;
  --success: #62b98a;
  --warning: #d6a85a;
  --danger: #e58179;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-md: 0 8px 20px -8px rgb(0 0 0 / .6), 0 1px 3px rgb(0 0 0 / .4);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* notch / home indicator (needs viewport-fit=cover) */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-family: var(--font-sans);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
a { color: var(--accent); text-underline-offset: 0.18em; }

.ow-container { max-width: var(--measure); margin: 0 auto; }
.ow-muted { color: var(--text-muted); }

/* Buttons: ink by default, accent on hover/focus */
.ow-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .6em 1.15em; border: 1px solid var(--text); border-radius: var(--radius);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--text); color: var(--bg);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ow-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ow-btn:focus-visible, .ow-input:focus-visible, .ow-select:focus-visible, .ow-textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.ow-btn:disabled { opacity: .45; cursor: not-allowed; }
.ow-btn--secondary { background: transparent; color: var(--text); border-color: var(--border); }
.ow-btn--secondary:hover { background: var(--surface); border-color: var(--text); color: var(--text); }
.ow-btn--danger { background: var(--danger); border-color: var(--danger); }
.ow-btn--danger:hover { background: var(--danger); border-color: var(--danger); filter: brightness(.9); }

/* Form fields */
.ow-field { display: flex; flex-direction: column; gap: .3em; margin-bottom: var(--space); }
.ow-label { font-weight: 600; font-size: .9rem; }
.ow-input, .ow-select, .ow-textarea {
  width: 100%; padding: .6em .75em; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.ow-input--error { border-color: var(--danger); }
.ow-error { color: var(--danger); font-size: .9rem; min-height: 1.4em; margin: 0; }

/* Section panel */
.ow-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ow-card__title { margin: 0 0 .3em; font-size: 1.35rem; }

/* Traffic-light status: dot + text */
.ow-status { display: inline-flex; align-items: center; gap: .45em; font-size: .9rem; font-weight: 600; color: var(--_c); }
.ow-status::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--_c); }
.ow-status--green  { --_c: var(--success); }
.ow-status--yellow { --_c: var(--warning); }
.ow-status--red    { --_c: var(--danger); }

/* Privacy note: one quiet line */
.ow-banner { display: flex; align-items: baseline; gap: .5em; font-size: .95rem; color: var(--text-muted); }

/* Dialog */
.ow-dialog {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 31rem;
  width: calc(100% - 2rem); color: var(--text); background: var(--surface);
}
.ow-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.ow-dialog h2 { margin: 0 0 .75em; font-size: 1.35rem; }
.ow-dialog__actions { display: flex; flex-wrap: wrap; gap: .5em; justify-content: flex-end; margin-top: var(--space); }

/* Page frame for tools */
.ow-topbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; font-size: .95rem; }
.ow-topbar a { color: var(--text-muted); }
.ow-page-title { font-weight: 800; letter-spacing: -0.04em; }
.ow-list { list-style: none; margin: 1rem 0; padding: 0; border-top: 1px solid var(--border); }
.ow-list__item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.ow-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ow-dialog__actions > a { margin-right: auto; }
.ow-icon { flex: none; vertical-align: -0.15em; }
.ow-page-title .ow-icon { margin-right: .25em; vertical-align: -0.08em; }

/* Toolbar (theme toggle, language switcher) */
.ow-toolbar { display: inline-flex; align-items: center; gap: .5rem; }
.ow-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--text); cursor: pointer;
}
.ow-iconbtn:hover { border-color: var(--text); }
.ow-iconbtn:focus-visible, .ow-langselect select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ow-langselect { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-muted); }
.ow-langselect select { font: inherit; font-size: .9rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .35em .5em; }
.ow-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Notices, toast, skip link ---- */
.ow-skip { position: absolute; left: var(--s-2); top: -4rem; z-index: 100; padding: var(--s-2) var(--s-3); background: var(--text); color: var(--bg); border-radius: var(--radius); }
.ow-skip:focus { top: var(--s-2); }
.ow-notices { display: grid; gap: var(--s-2); }
.ow-notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-small); }
.ow-notice--warn { border-left-color: var(--warning); }
.ow-notice p { margin: 0; flex: 1 1 16rem; }
.ow-usage { margin: 0 0 var(--s-5); font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ow-toast { position: fixed; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 200; max-width: calc(100% - 2rem); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--text); color: var(--bg); font-size: var(--fs-small); }
.ow-btn--small { padding: .35em .8em; font-size: var(--fs-small); }
.ow-btn--link { background: none; border-color: transparent; color: var(--accent); padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: .18em; }
.ow-btn--link:hover { background: none; border-color: transparent; color: var(--accent); filter: brightness(.85); }
.ow-key { font-family: var(--font-mono); letter-spacing: .04em; }

/* ---- Site shell ---- */
.ow-sitehead__in { display: flex; align-items: center; gap: var(--s-4); }
.ow-wordmark { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.03em; color: var(--text); text-decoration: none; margin-right: auto; }
.ow-sitenav { display: flex; gap: var(--s-4); }
.ow-sitenav a { color: var(--text-muted); text-decoration: none; padding: var(--s-2) 0; }
.ow-sitenav a:hover, .ow-sitenav a[aria-current="page"] { color: var(--text); }
.ow-sitefoot { margin-top: var(--s-9); border-top: 1px solid var(--border); padding: var(--s-7) 0 var(--s-6); font-size: var(--fs-small); color: var(--text-muted); }
.ow-sitefoot__in { display: grid; gap: var(--s-6) var(--s-7); grid-template-columns: 1fr; }
.ow-sitefoot__brand p { margin: var(--s-2) 0 0; max-width: 22rem; }
.ow-sitefoot__brand .ow-wordmark { margin: 0; }
.ow-sitefoot__col { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.ow-sitefoot__col h2 { margin: 0 0 var(--s-1); font-size: var(--fs-small); letter-spacing: 0; font-weight: 700; color: var(--text); }
.ow-sitefoot a { color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.ow-sitefoot a:hover { color: var(--text); text-decoration: underline; }
.ow-sitefoot__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.ow-sitefoot__license { margin: 0; margin-right: auto; max-width: 38rem; }

/* ---- Tool shell ---- */
.ow-toolhead { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); }
.ow-toolhead__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.ow-toolhead__back { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-muted); text-decoration: none; font-weight: 700; }
.ow-toolhead__back:hover { color: var(--text); }
.ow-toolhead__title { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin-right: auto; color: var(--accent); }
.ow-toolhead__title span { color: var(--text); }
.ow-toolstatus { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); }
.ow-menuwrap { position: relative; }
.ow-menu { position: absolute; right: 0; top: calc(100% + var(--s-2)); min-width: 15rem; padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / .18); z-index: 30; }
.ow-menu[hidden], .ow-menu__backdrop[hidden] { display: none; }
.ow-menu__item { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3); border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.ow-menu__item:hover, .ow-menu__item:focus-visible { background: var(--bg); outline: none; }
.ow-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.ow-menu__item select { margin-left: auto; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .25em .4em; }
.ow-about { margin-top: var(--s-7); border-top: 1px solid var(--border); padding-top: var(--s-5); }
.ow-about summary { cursor: pointer; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.ow-about summary::-webkit-details-marker { display: none; }
.ow-about summary .ow-icon { transition: transform var(--dur) var(--ease); }
.ow-about[open] summary .ow-icon { transform: rotate(180deg); }
.ow-about__text { max-width: var(--measure-text); }
.ow-compare { display: grid; gap: var(--s-4) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: var(--s-4) 0; }
.ow-compare h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }
.ow-compare ul { margin: 0; padding-left: 1.2em; }
.ow-compare--premium h3 { color: var(--accent); }

/* ---- Layout helpers ---- */
.ow-container--wide { max-width: var(--measure-wide); }
.ow-prose { max-width: var(--measure-text); }
.ow-prose h2 { margin: var(--s-7) 0 var(--s-3); font-size: var(--fs-h2); }
.ow-prose p, .ow-prose li { margin: 0 0 var(--s-3); }
.ow-prose details { border-bottom: 1px solid var(--border); padding: var(--s-3) 0; }
.ow-prose summary { cursor: pointer; font-weight: 700; }
@media (min-width: 1100px) { .ow-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; } }

/* ---- Loading skeleton ---- */
.ow-skeleton { height: 5rem; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent) 0 0 / 200% 100%; animation: ow-shimmer 1.4s linear infinite; }
@keyframes ow-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.ow-notices:empty { display: none; }
.ow-usage:empty { display: none; }
.ow-menu__backdrop { display: none; }
.ow-sitehead__in, .ow-toolhead__in { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.ow-sitehead__bar .ow-langselect select { min-height: 0; }
.ow-row > .ow-input { flex: 1 1 14rem; width: auto; }
.ow-container--tool > .ow-notices { margin-bottom: var(--s-4); }
.ow-workspace { margin-bottom: var(--s-4); }
.ow-workspace .ow-row { margin-bottom: var(--s-3); }

/* Premium badge (see premium.js) */
.ow-premium { display: inline-flex; align-items: center; gap: .3em; margin-left: .85em; padding: .15em .7em; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); font-size: .72rem; font-weight: 700; line-height: 1.5; letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
.ow-premium[hidden] { display: none; }
.ow-premium--compact { padding: .2em .4em; margin-left: .5em; }
main#main.ow-container--wide { padding-top: var(--s-5); }