/* FT8. Page layout in the kit's tokens, like the other modules; the
   waterfall in its own fixed colours, because a screen of signals is dark
   whatever the theme. */

.ft8 {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) 1fr;
  gap: var(--s-6);
  align-items: start;
}
/* The kit gives .note its own display, which outranks the hidden
   attribute. */
.ft8 [hidden] { display: none !important; }

.f8-side { position: sticky; top: var(--s-4); display: grid; gap: var(--s-3); }
.f8-thumb { display: grid; gap: var(--s-2); }
.f8-bench { display: grid; gap: var(--s-6); min-width: 0; }
.f8-bench section { display: grid; gap: var(--s-3); min-width: 0; }

.f8-h { font-size: var(--t-lg, 1.15rem); margin: 0; }
.f8-hint { color: var(--muted); margin: 0; max-width: 60ch; font-size: var(--t-sm); }
.f8-message { margin: 0; }
.f8-done { display: grid; gap: var(--s-2); justify-items: start; }
.f8-done h2 { margin: 0; font-size: var(--t-lg, 1.15rem); }
.f8-done p { margin: 0; }
.f8-done .btn { min-height: var(--tap, 48px); }

/* The clock: seconds to the next period, what is on the air, the one thing
   to press. */
.f8-clock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "count text" "bar bar" "actions actions";
  gap: var(--s-2) var(--s-3);
  align-items: center;
  padding: var(--s-3);
  background: var(--surface);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-control);
}
.f8-count { grid-area: count; margin: 0; display: flex; align-items: baseline; gap: 2px; min-width: 2.6rem; }
.f8-count-n { font-size: var(--t-2xl); font-weight: var(--w-heavy, 800); line-height: 1; font-variant-numeric: tabular-nums; }
.f8-count-unit { color: var(--muted); font-weight: var(--w-strong); }
.f8-clock-text { grid-area: text; display: grid; gap: 2px; min-width: 0; }
.f8-period, .f8-txstate { margin: 0; font-size: var(--t-sm); line-height: 1.3; }
.f8-period { color: var(--muted); }
.f8-txstate { font-weight: var(--w-strong); overflow-wrap: anywhere; }
.f8-txstate.is-tx { color: var(--danger); }
.f8-bar { grid-area: bar; height: 4px; border-radius: 2px; background: var(--sunk); overflow: hidden; }
.f8-bar span {
  display: block; height: 100%; background: var(--accent);
  transform-origin: left; transform: scaleX(var(--p, 0));
}
.f8-bar.is-tx span { background: var(--danger); }
.f8-actions { grid-area: actions; display: flex; gap: var(--s-2); }
.f8-actions .btn { flex: 1 1 0; min-width: 0; min-height: var(--tap, 48px); }

/* The checklist folds; its summary is the heading, the count, and -- only
   while folded -- the next step. */
.f8-check > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2);
  margin-bottom: var(--s-2); cursor: pointer; list-style: none;
}
.f8-check > summary::-webkit-details-marker { display: none; }
.f8-check > summary::before { content: "▾"; color: var(--muted); }
.f8-check:not([open]) > summary::before { content: "▸"; }
.f8-progress { color: var(--muted); }
.f8-next { flex-basis: 100%; color: var(--muted); }
.f8-check[open] .f8-next { display: none; }
.f8-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.f8-checklist li { display: grid; grid-template-columns: 1.4rem 1fr; column-gap: var(--s-2); align-items: start; }
.f8-ring {
  width: 1.1rem; height: 1.1rem; margin-top: 0.15rem;
  border: 2px solid var(--rule-strong); border-radius: 50%;
}
.f8-checklist li.is-done .f8-ring { background: var(--done); border-color: var(--done); }
.f8-checklist li.is-done .f8-step-label { color: var(--muted); }

/* "Før du sender" is a details element: open on a desktop, where its
   summary is just the heading; folded on a phone to one line that says the
   settings and opens them again. */
.f8-rig { display: grid; gap: var(--s-3); min-width: 0; }
.f8-rig > summary { list-style: none; }
.f8-rig > summary::-webkit-details-marker { display: none; }
.f8-rig-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.f8-rig-summary { color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.f8-rig[open] .f8-rig-summary { display: none; }
.f8-rig-body { display: grid; gap: var(--s-3); }

/* Before sending: band, power, audio level, each with what the radio
   shows under its name -- red words when it is wrong. */
.f8-settings { display: grid; gap: var(--s-3); max-width: 36rem; }
.f8-setting {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: var(--s-3); align-items: center;
}
.f8-label { display: grid; margin: 0; font-weight: var(--w-strong); line-height: 1.25; }
.f8-setting .choice button { min-height: var(--tap, 48px); padding: 0 var(--s-1); white-space: nowrap; }
.f8-readout {
  color: var(--muted); font-size: var(--t-sm); font-weight: normal;
  font-variant-numeric: tabular-nums;
}
.f8-readout.is-busy { color: var(--late); font-weight: var(--w-strong); }

/* The waterfall. */
.f8-wf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.f8-canvas {
  display: block; width: 100%; height: 260px;
  border-radius: var(--radius-control); background: #091619;
  cursor: crosshair; touch-action: manipulation;
}
.f8-canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Sound: on or off in words, and a volume a finger can drag. */
.f8-sound { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.f8-sound .btn { min-height: var(--tap, 48px); }
.f8-sound .btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--tint); }
.f8-volume { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 10rem; max-width: 18rem; }
.f8-volume span { color: var(--muted); font-size: var(--t-sm); }
.f8-volume input { flex: 1; min-width: 0; height: var(--tap, 48px); accent-color: var(--accent); }

/* The decode lists: WSJT-X's columns, the message in the call sign face. */
.f8-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.f8-line {
  display: grid;
  grid-template-columns: 3.9em 2.2em 2.4em 2.8em minmax(0, 1fr);
  column-gap: 0.45em; align-items: center;
  width: 100%; min-height: 2rem; padding: 0 var(--s-2);
  font: inherit; font-size: var(--t-sm); text-align: left; color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: none; border: 0; border-radius: var(--radius-tag);
}
.f8-line > span { white-space: nowrap; overflow: hidden; }
.f8-db, .f8-dt, .f8-hz { text-align: right; }
.f8-msg { padding-left: 0.3em; }
.f8-txmark { grid-column: 2 / 4; text-align: right; color: var(--progress); font-weight: var(--w-strong); }
.f8-cols { min-height: 1.5rem; color: var(--muted); font-size: var(--t-xs); }
.f8-cols span:nth-child(n+2):nth-child(-n+4) { text-align: right; }
.f8-cols span:last-child { padding-left: 0.3em; }
button.f8-line { min-height: 44px; cursor: pointer; }
button.f8-line:hover { box-shadow: inset 0 0 0 1px var(--rule-strong); }
button.f8-line:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.f8-line.is-cq { background: color-mix(in srgb, var(--done) 13%, var(--paper)); }
.f8-line.is-me { background: color-mix(in srgb, var(--late) 15%, var(--paper)); font-weight: var(--w-strong); }
.f8-line.is-tx { background: color-mix(in srgb, var(--progress) 13%, var(--paper)); }
.f8-sep {
  display: flex; gap: var(--s-2); align-items: baseline;
  margin-top: var(--s-2); padding: 0 var(--s-2) 2px;
  color: var(--muted); font-size: var(--t-xs);
  border-bottom: var(--rule-w) solid var(--rule);
}
.f8-sep:first-child { margin-top: 0; }

/* The log. */
.f8-logwrap { overflow-x: auto; max-width: 100%; }
.f8-logbook { border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.f8-logbook th { text-align: left; color: var(--muted); font-weight: var(--w-strong); font-size: var(--t-xs); }
.f8-logbook th, .f8-logbook td { padding: var(--s-1) var(--s-3) var(--s-1) 0; border-bottom: var(--rule-w) solid var(--rule); white-space: nowrap; }
.f8-logbook th:last-child, .f8-logbook td:last-child { padding-right: 0; }

/* The log dialog: the sheet's facts, then the press. */
.ft8 .sheet .f8-hint { margin-bottom: var(--s-3); }
.ft8 .sheet .btn { min-height: var(--tap, 48px); }

@media (max-width: 760px) {
  .ft8 {
    grid-template-columns: 1fr; gap: var(--s-4);
    padding-bottom: calc(var(--f8-thumb-h, 12rem) + var(--s-5));
  }
  .f8-side { position: static; }
  .f8-line { font-size: var(--t-xs); padding: 0 var(--s-1); column-gap: 0.4em; }
  .f8-logbook { font-size: var(--t-xs); }
  .f8-logbook th, .f8-logbook td { padding-right: var(--s-2); }
  /* The clock, the press and the answer to it at the bottom of the screen,
     above the menu, wherever the page is scrolled. */
  .f8-thumb {
    position: fixed; z-index: 15;
    left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
    gap: var(--s-1);
  }
  body:has(.tabbar) .f8-thumb { bottom: calc(var(--tabbar-h) + var(--s-2) + env(safe-area-inset-bottom)); }
  .f8-clock {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "count text actions" "bar bar bar";
    padding: var(--s-2) var(--s-3);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 0.12);
  }
  .f8-actions .btn { flex: none; padding: 0 var(--s-2); font-size: var(--t-sm); }
  .f8-period, .f8-txstate { font-size: var(--t-xs); }
  .f8-message { border: var(--rule-w) solid var(--rule-strong); font-size: var(--t-sm); padding-block: var(--s-2); }

  /* During a QSO the screen is for the waterfall and the decode list:
     the settings fold to a line, the list comes straight after the
     waterfall, the bottom bar is one compact block, and a message gives
     its room back after a few seconds (ft8.js). */
  .f8-rig > summary {
    display: grid; grid-template-columns: 1rem minmax(0, 1fr); column-gap: var(--s-2);
    min-height: var(--tap, 48px); align-content: center; cursor: pointer;
  }
  .f8-rig > summary::before { content: "▾"; color: var(--muted); grid-row: 1; }
  .f8-rig:not([open]) > summary::before { content: "▸"; }
  .f8-rig-summary { grid-column: 2; font-size: var(--t-sm); color: var(--accent); }
  .f8-bench { gap: var(--s-4); }
  .f8-wf .f8-sound { order: 2; }
  .f8-wf .f8-hint { order: 3; }
  .f8-sep { margin-top: var(--s-1); }
  .f8-activity { order: 1; }
  .f8-qso { order: 2; }
  .f8-logsec { order: 3; }
  .f8-canvas { height: 140px; }
  .ft8.is-operating .f8-bench .f8-h { font-size: var(--t-md); }
  .f8-line { min-height: 1.75rem; }
  .ft8.is-operating .f8-wf .f8-hint { display: none; }
  .f8-message.is-faded { display: none; }
  .f8-long { display: none; }
  .f8-clock { column-gap: var(--s-2); }
  .f8-count-n { font-size: var(--t-xl); }
  .f8-clock-text { gap: 0; }
  .f8-txstate { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}