/* Shared base for the tool pages (all five tools): colour tokens,
   color-scheme, the common header, the help dialog and a few rules every
   page needs. Each tool's own
   style.css builds on it.

   The shared theme.js always sets <html data-theme="light|dark"> (also for
   "auto"), so there is one light set here and one dark override. A page
   without JS stays light. */

:root{
  color-scheme: light;
  --bg: #ffffff;
  --bg-raised: #f5f5f5;
  --line: #00000017;
  /* borders of form controls: at least 3:1 against --bg (WCAG 1.4.11) */
  --line-strong: #00000061;
  --text: #000000de;
  --text-dim: #00000099;
  /* the button/toggle colour: white on it >= 4.5:1 (WCAG 1.4.3); as an
     outline >= 3:1 on --bg in both themes (1.4.11) */
  --accent: #4560f0;
  /* accent as text colour on --bg / --bg-raised (>= 4.5:1, small text) */
  --accent-text: #3f55d9;
  /* also used for hint text: >= 4.5:1 on --bg and --bg-raised */
  --accent-dim: #5563c0;
  --accent-soft: #4560f01a;
  --ok: #2e7d32;
  --ok-soft: #2e7d321a;
  /* warning text, also on --warn-soft: >= 4.5:1 */
  --warn: #8f5f00;
  --warn-soft: #f9a8251f;
  --err: #c62828;
  --err-soft: #c628281a;
  --header-bg: rgba(255,255,255,.72);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: hsla(225,15%,5%,1);
  --bg-raised: hsla(225,20%,10%,1);
  --line: hsla(225,15%,90%,.14);
  --line-strong: hsla(225,15%,90%,.38);
  --text: hsla(225,15%,90%,.82);
  /* muted text: >= 4.5:1 on --bg and --bg-raised */
  --text-dim: hsla(225,15%,90%,.57);
  --accent: #4560f0;
  --accent-text: #9aa8f5;
  --accent-dim: #9aa8f5;
  --accent-soft: #4560f02e;
  --ok: #7bc47f;
  --ok-soft: #7bc47f24;
  --warn: #e0b35c;
  --warn-soft: #e0b35c1f;
  --err: #e0776b;
  --err-soft: #e0776b24;
  --header-bg: rgba(12,13,15,.72);
}

*{ box-sizing: border-box; }
[hidden]{ display:none !important; }

/* Visually hidden, still read by screen readers (table captions, icon
   button names). */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* iOS Safari zooms into any focused field whose text is smaller than 16px:
   each tool's style.css sets its fields to >= 16px under
   @media (pointer: coarse) (a blanket rule here would also shrink the
   bigger ones, like confirm's callsign field). */

/* The hidden <input type="date"> behind the date fields' calendar button
   (js/isodate.js): only its picker shows. */
.iso-date-picker{ position:fixed; width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none; }

/* Header controls (time zone, language, theme, help): at least 24×24 CSS
   px everywhere (WCAG 2.5.8). :root lifts the specificity above the
   tools' own `min-height:0`. */
:root #theme-toggle button, :root #time-toggle button, :root .toggle button,
:root button[data-theme-choice], :root button[data-time-choice], :root button[data-time-mode],
:root button[data-lang], :root #btn-help{ min-height:24px; min-width:24px; }

/* A waiting update (offline.js): a bar over the top of the page, above the
   sticky header; not modal ("Später" puts the button back in the header). */
.update-bar{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.5em 1em; padding:.55em 1em; background:var(--bg-raised); color:var(--text); border-bottom:2px solid var(--accent); box-shadow:0 2px 12px #0004; }
.update-bar-text{ font-weight:600; }
.update-bar button{ min-height:32px; }

/* The way back to the overview: a target of at least 24 px too. */
:root #back-link, :root #home-link{ display:inline-flex; align-items:center; min-height:24px; }

/* ---------- the common header (#108 C1, C3) ----------
   Every tool, in this order: the way back ("← Alle Tools"), the title and
   links about the tool (manual, single file, source); then .hdr-status
   (status chips, update button), which takes the room left and wraps
   inside itself; then .hdr-controls (clock, time zone, language, theme
   and "? Hilfe"), which stays together at the right, help always last.
   On a phone the first line keeps the way back, the manual, the clock and
   the help; status chips and settings flow together below. */
#site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.4em .6em; flex-wrap:wrap;
  padding:.45em 1em;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(8px); /* Safari < 18 */
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  font-size:14.5px;
}
#site-header a{ color:var(--text-dim); text-decoration:none; }
#site-header a:hover{ color:var(--accent-text); }
#site-header .title{ font-size:inherit; margin:0; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
#site-header .hdr-link{ display:inline-flex; align-items:center; min-height:24px; border:1px solid var(--line); border-radius:4px; padding:.05em .5em; font-size:13.5px; }
.hdr-status{ flex:1 1 0; min-width:0; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.4em .5em; }
/* a chip never spills out of the group: its text wraps instead */
#site-header .hdr-status > *{ max-width:100%; white-space:normal; text-align:center; }
.hdr-controls{ margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.4em .6em; }
#btn-help{ order:99; font-size:13.5px; padding:.15em .6em; }
/* segmented choices (time zone, language, theme) */
.toggle{ display:inline-flex; flex-wrap:wrap; max-width:100%; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.toggle button{ background:none; border:none; border-radius:0; color:var(--text-dim); font:inherit; font-size:12.5px; padding:.2em .6em; cursor:pointer; }
.toggle button + button{ border-left:1px solid var(--line); }
.toggle button.active, .toggle button[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-text); }
@media (max-width: 640px){
  #site-header{ padding:.4em .6em; }
  #site-header .title{ display:none; }
  .hdr-controls, .hdr-status{ display:contents; }
  #site-header > *, .hdr-controls > *, .hdr-status > *{ order:2; }
  #site-header > #home-link, #site-header > #manual-link, .hdr-controls > .clock{ order:0; }
  .hdr-controls > #btn-help{ order:1; margin-left:auto; }
  #site-header::after{ content:""; order:1; flex-basis:100%; height:0; } /* status and settings flow on below */
}

/* ---------- the help dialog (js/helpdialog.js) ---------- */
.help-dlg{ background:var(--bg); color:var(--text); border:1px solid var(--line-strong); border-radius:8px; padding:0; box-shadow:0 10px 40px rgba(0,0,0,.35); width:min(860px, calc(100vw - 2em)); max-width:none; max-height:calc(100vh - 2em); }
.help-dlg::backdrop{ background:rgba(0,0,0,.35); }
.help-dlg[open]{ display:flex; flex-direction:column; }
.help-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em 1em; padding:.7em 1em; border-bottom:1px solid var(--line); }
.help-head h2{ margin:0; font-size:18px; flex:1; }
.help-head a{ color:var(--accent-text); font-size:14.5px; }
.help-body{ display:grid; grid-template-columns:11em minmax(0, 1fr); min-height:0; overflow:hidden; flex:1; }
.help-nav{ border-right:1px solid var(--line); padding:.6em; display:flex; flex-direction:column; gap:.1em; overflow:auto; }
.help-nav a{ color:var(--text); text-decoration:none; padding:.25em .5em; border-radius:4px; font-size:14.5px; }
.help-nav a:hover, .help-nav a:focus-visible{ background:var(--accent-soft); color:var(--accent-text); }
.help-content{ overflow:auto; padding:.2em 1.2em 1em; font-size:15px; line-height:1.45; }
.help-content h3{ font-size:16px; margin:1em 0 .4em; }
.help-content p{ margin:.4em 0; }
dl.kb{ display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:.4em 1em; margin:.3em 0; }
dl.kb dt{ font-weight:600; }
dl.kb dd{ margin:0; color:var(--text-dim); }
.help-foot{ margin:0; padding:.4em 1em; border-top:1px solid var(--line); font-size:12.5px; color:var(--text-dim); }
.help-foot a{ color:var(--accent-text); }
.help-content kbd{ font:12.5px var(--font-mono); border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:3px; padding:0 .3em; white-space:nowrap; }
@media (max-width: 640px){
  .help-body{ grid-template-columns:1fr; overflow:auto; }
  .help-nav{ flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--line); }
  .help-content{ overflow:visible; }
  dl.kb{ grid-template-columns:1fr; }
  dl.kb dd{ margin-bottom:.4em; }
}

/* ---------- the callsign lists dialog (js/callsignlists.js) ---------- */
.cl-dlg{ width:min(1100px, calc(100vw - 2em)); }
.cl-body{ padding:.6em 1em 1em; overflow:auto; }
.cl-shared{ margin:0 0 .8em; padding:.5em .7em; border:1px solid var(--accent); border-radius:6px; background:var(--accent-soft); color:var(--text); }
.cl-wrap{ overflow-x:auto; margin:0 0 .8em; }
.cl-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.cl-table th{ text-align:left; font-weight:700; padding:.4em .45em; border-bottom:2px solid var(--text-dim); white-space:nowrap; }
.cl-table td{ padding:.4em .45em; border-top:1px solid var(--line); vertical-align:baseline; }
.cl-table tbody tr:first-child td{ border-top:0; }
.cl-table .cl-num{ text-align:right; font-variant-numeric:tabular-nums; }
.cl-table .cl-on{ width:2.5em; text-align:center; }
.cl-table .cl-date{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.cl-table .cl-order{ white-space:nowrap; }
.cl-table .cl-act{ white-space:nowrap; text-align:left; }
.cl-table .cl-act:empty{ padding:0; }
.cl-table .cl-name{ width:99%; min-width:13em; }
.cl-table .cl-off .cl-title{ color:var(--text-dim); }
.cl-table .cl-title{ font-weight:600; overflow-wrap:anywhere; }
.cl-table .cl-meta{ display:block; color:var(--text-dim); }
.cl-table .cl-deleted .cl-title{ text-decoration:line-through; }
.cl-table .cl-call{ font-weight:600; white-space:nowrap; }
.cl-entries td{ overflow-wrap:anywhere; }
.cl-count{ margin:.3em 0; color:var(--text-dim); min-height:1.4em; }
.cl-view .field{ margin:.4em 0; }
.cl-test{ margin-top:1.2em; padding-top:.2em; border-top:1px solid var(--line-strong); }
.cl-test h3{ margin:.5em 0 .3em; font-size:16px; }
.cl-merged-box{ margin:.7em 0; padding:.4em .8em .5em; border:1px solid var(--accent); border-radius:6px; background:var(--accent-soft); }
.cl-merged-box h4{ margin:.2em 0 .1em; font-size:15px; }
.cl-merged-box .cl-wrap{ margin:0; }
.cl-merged-table th{ border-bottom:1px solid var(--line-strong); }
.cl-merged-table td{ border-top:1px solid var(--line); }
.cl-val{ font-weight:700; font-size:15.5px; }
.cl-from{ display:block; color:var(--text-dim); font-size:12.5px; }
.cl-note{ margin:.1em 0; }
.cl-test h4{ margin:.7em 0 .2em; font-size:15px; }
.cl-msg{ min-height:1.4em; margin:.4em 0; }
.cl-msg.ok::before{ content:"✔ "; }
.cl-msg.err{ color:var(--err); }
.cl-msg.err::before{ content:"✖ "; }
/* phone: one card per list or entry, each value with its column name */
@media (max-width: 640px){
  .cl-table, .cl-table tbody, .cl-table tr, .cl-table td{ display:block; }
  .cl-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .cl-table tr{ padding:.5em 0; border-top:1px solid var(--line-strong); }
  .cl-table tbody tr:first-child{ border-top:0; }
  .cl-table td{ border:0; padding:.15em 0; text-align:left; display:flex; gap:.6em; align-items:baseline; }
  .cl-table td::before{ content:attr(data-label); flex:0 0 7em; color:var(--text-dim); font-size:13px; }
  .cl-table .cl-on, .cl-table .cl-num{ width:auto; text-align:left; }
  .cl-table .cl-name{ width:auto; min-width:0; }
  .cl-table .cl-act{ display:inline-flex; padding:.15em .5em .15em 0; }
  .cl-table .cl-act::before{ display:none; }
  .cl-table .cl-act:empty{ display:none; }
  .cl-entries td:empty{ display:none; }
}

/* ---------- tables: column names that stay in view (.sticky-head) ---------- */
/* On the wrapper around a <table>: the column names stay in view while the
   page scrolls, right below the sticky page header (--site-header-h, kept
   current by trackSiteHeaderHeight() in js/stickyhead.js). The wrapper clips
   instead of scrolling (a scroll container would hold the sticky header),
   so the columns must fit; browsers without overflow: clip keep the
   scrolling wrapper and a header that scrolls away. Clearly a header:
   bold, opaque over the rows, a strong rule below. */
@supports (overflow: clip){
  .table-wrap.sticky-head{ overflow-x:clip; }
}
.sticky-head th{
  font-weight:700; color:var(--text); white-space:nowrap;
  background:linear-gradient(var(--line), var(--line)) var(--bg); /* opaque while it sticks over rows */
  border-bottom:2px solid var(--text-dim);
  position:sticky; top:var(--site-header-h, 0px); z-index:2;
}
/* the line under the header stays with it while it sticks */
.sticky-head thead th{ box-shadow:0 1px 0 var(--text-dim); }

/* ---------- tables: the row being edited (table.row-marks) ---------- */
/* On the <table>; JS sets .row-editing on the <tr> whose record is in the
   edit form. Framed in the form's editing colour and marked "✎" (not by
   colour alone: other rows may be tinted too). The specificity is above a
   tool's own row tints (tr.match td …), so the frame wins. The marker text
   is the screen reader's alternative (German: the tools are used in German). */
table.row-marks tbody tr.row-editing > td{ background:var(--warn-soft); border-top:2px solid var(--warn); border-bottom:2px solid var(--warn); }
table.row-marks tbody tr.row-editing > td:first-child{ box-shadow:inset 4px 0 0 var(--warn); }
table.row-marks tbody tr.row-editing > td:first-child::before{ content:"✎ "; content:"✎ " / "wird bearbeitet: "; color:var(--warn); font-weight:700; }