/*
 * The Skiathos Guide — the busiest-times dashboard.
 *
 * Scoped under body.biz so nothing here reaches a visitor page. It borrows the
 * surface tokens business.css already declares (--biz-ground, --biz-panel,
 * --biz-band, --biz-ink, --biz-soft, --biz-line) and adds only what a working
 * tool needs that an article did not: a control row, panels, and charts.
 *
 * Six colours, three faces, nothing else. Every number, time and temperature
 * takes the mono face. Prose never does.
 *
 * Charts are hand-built inline SVG drawn at the container's real pixel width,
 * so a label is the same size on a phone as on a desktop. Nothing here scales
 * type down to fit. Colour is never the only carrier of meaning: the peak bar
 * is also named, the two temperature lines also differ in dash and marker.
 */

body.biz {
  --chart-bar:    var(--deep);
  --chart-bar-2:  var(--pine);
  --chart-peak:   var(--bougie);
  --chart-grid:   color-mix(in srgb, var(--deep) 14%, transparent);
  --chart-axis:   color-mix(in srgb, var(--deep) 34%, transparent);
  --chart-ghost:  color-mix(in srgb, var(--deep) 20%, transparent);
  --tool-shadow:  0 1px 2px rgba(10, 58, 71, .05), 0 12px 32px rgba(10, 58, 71, .08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz {
    --chart-bar:   #6fc5c0;
    --chart-bar-2: #4e9c8c;
    --chart-peak:  #e86f92;
    --chart-grid:  rgba(111, 197, 192, .16);
    --chart-axis:  rgba(111, 197, 192, .42);
    --chart-ghost: rgba(111, 197, 192, .24);
    --tool-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .34);
  }
}
:root[data-theme="dark"] body.biz {
  --chart-bar:   #6fc5c0;
  --chart-bar-2: #4e9c8c;
  --chart-peak:  #e86f92;
  --chart-grid:  rgba(111, 197, 192, .16);
  --chart-axis:  rgba(111, 197, 192, .42);
  --chart-ghost: rgba(111, 197, 192, .24);
  --tool-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .34);
}

/* ==================================================== the honesty box
   First thing on the page and deliberately hard to skip. Two sentences.
   The left rule is bougainvillea because this is the one place on the
   business side where the accent is doing a job rather than decorating. */

.honesty {
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-left: 5px solid var(--bougie);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 0 0 30px;
  box-shadow: var(--tool-shadow);
}
.honesty h2 {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bougie);
  margin: 0 0 12px;
  font-weight: 600;
}
.honesty p {
  margin: 0 0 10px;
  color: var(--biz-ink);
  font-size: .96rem;
  line-height: 1.6;
  max-width: 72ch;
}
.honesty p:last-child { margin-bottom: 0; }
.honesty b { font-weight: 600; }

/* ================================================== JavaScript is off
   The whole tool is worked out in the browser, so with scripting off there
   is nothing to draw. An empty panel looks like a broken site, so the empty
   panels are hidden and this says what happened and where to go instead. */
.nojs {
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-left: 5px solid var(--deep);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 0 0 30px;
  box-shadow: var(--tool-shadow);
}
.nojs h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--biz-ink);
  margin: 0 0 10px;
  letter-spacing: 0;
  text-transform: none;
}
.nojs p { margin: 0 0 10px; color: var(--biz-soft); font-size: .95rem; line-height: 1.6; }
.nojs p:last-child { margin-bottom: 0; }
.nojs a { color: var(--biz-ink); }
@media (max-width: 620px) { .nojs { padding: 18px 16px; border-radius: 14px; } }

/* ------------------------------------------------------ source chips
   Two states only, and they read as words rather than as colours.
   "Measured" means somebody published it. "Estimate" means we worked it
   out. There is no third, softer word for a guess. */

.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  vertical-align: 2px;
  white-space: nowrap;
  font-weight: 600;
}
.chip.measured {
  background: color-mix(in srgb, var(--pine) 16%, transparent);
  color: var(--pine);
  border: 1px solid color-mix(in srgb, var(--pine) 34%, transparent);
}
.chip.model {
  background: color-mix(in srgb, var(--bougie) 12%, transparent);
  color: var(--bougie);
  border: 1px solid color-mix(in srgb, var(--bougie) 32%, transparent);
}
.chip.caution {
  background: transparent;
  color: var(--biz-soft);
  border: 1px solid var(--bougie);
}
.chip.unknown {
  background: transparent;
  color: var(--biz-soft);
  border: 1px dashed var(--chart-axis);
}

/* the "where all of this comes from" fold, at the foot of the arrivals */
details.srcbox { margin-top: 20px; }
details.srcbox > summary {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--biz-soft);
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
details.srcbox > summary::-webkit-details-marker { display: none; }
details.srcbox > summary:hover { color: var(--bougie); }
details.srcbox > summary:focus-visible { outline: 2px solid var(--bougie); outline-offset: 3px; border-radius: 6px; }
:root[data-theme="dark"] body.biz .chip.measured { color: #7fd6bd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .chip.measured { color: #7fd6bd; }
}

/* ====================================================== the control row
   Set once, remembered. Three questions and one switch, on one line on a
   desktop and stacked on a phone. It sits above everything it changes. */

.controls {
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  padding: 20px 22px 18px;
  box-shadow: var(--tool-shadow);
}
.controls > .ctitle {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--biz-soft);
  margin: 0 0 14px;
}
.ctrlgrid {
  display: grid;
  grid-template-columns: 1.15fr 1.35fr .8fr;
  gap: 16px 18px;
  align-items: end;
}
.ctrl label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--biz-ink);
  margin: 0 0 6px;
}
.ctrl select,
.ctrl input[type="date"] {
  width: 100%;
  font-family: var(--font-sans);
  font-size: .92rem;
  color: var(--biz-ink);
  background: var(--biz-ground);
  border: 1px solid var(--chart-axis);
  border-radius: 12px;
  padding: 11px 12px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}
.ctrl input[type="date"] { font-family: var(--font-mono); font-size: .88rem; }
.ctrl select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
  /* "Skiathos Town, old town and Papadiamantis" is longer than a phone. Let it
     trail off rather than run under the caret. */
  text-overflow: ellipsis;
}
.ctrl select:focus-visible,
.ctrl input:focus-visible {
  outline: 2px solid var(--bougie);
  outline-offset: 2px;
}
.ctrl .hint {
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--biz-soft);
  margin: 6px 0 0;
  line-height: 1.45;
}

.ctrlfoot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--biz-line);
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .84rem;
  color: var(--biz-ink);
  cursor: pointer;
}
.switch input { width: 17px; height: 17px; accent-color: var(--pine); margin: 0; cursor: pointer; }
/* The box is 17px, so the ring has to sit on the label or a thumb never sees it. */
.switch:has(input:focus-visible) {
  outline: 2px solid var(--bougie);
  outline-offset: 3px;
  border-radius: 10px;
}
.switch input:focus-visible { outline: none; }
.ctrlfoot .saved {
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--biz-soft);
  margin-left: auto;
}
body.biz .ctrlfoot .switch-note {
  font-family: var(--font-mono);
  font-size: .62rem;
  line-height: 1.4;
  color: var(--biz-soft);
  margin-left: -12px;
}
@media (max-width: 620px) {
  body.biz .ctrlfoot .switch-note { margin-left: 0; width: 100%; margin-top: -4px; }
}
.btn-plain {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--chart-axis);
  color: var(--biz-soft);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.btn-plain:hover { border-color: var(--bougie); color: var(--bougie); }
.btn-plain:focus-visible { outline: 2px solid var(--bougie); outline-offset: 2px; }

/* the sentence that says what the tool now thinks you are */
.youare {
  margin: 16px 0 0;
  font-size: .9rem;
  color: var(--biz-soft);
  line-height: 1.6;
}
.youare b { color: var(--biz-ink); font-weight: 600; }
.youare .mono { font-family: var(--font-mono); font-size: .82rem; }

/* ========================================================== panels */

.panel {
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--tool-shadow);
}
.panel + .panel { margin-top: 22px; }

.panel > h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.22rem;
  color: var(--biz-ink);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.panel > .sub {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--biz-soft);
  margin: 0 0 18px;
  line-height: 1.5;
}

/* the one-line plain reading that sits under every chart */
.reading {
  margin: 14px 0 0;
  padding: 13px 15px;
  background: var(--biz-band);
  border-radius: 12px;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--biz-ink);
}
.reading b { font-weight: 600; }
.reading .mono { font-family: var(--font-mono); font-size: .86rem; }

.chartbox { width: 100%; }
.chartbox svg { display: block; width: 100%; height: auto; overflow: visible; }

/* chart internals, styled here so the dark toggle reaches them */
.c-grid  { stroke: var(--chart-grid); stroke-width: 1; }
.c-axis  { stroke: var(--chart-axis); stroke-width: 1; }
.c-bar   { fill: var(--chart-bar); }
.c-bar.is-peak { fill: var(--chart-peak); }
.c-bar.is-ghost { fill: var(--chart-ghost); }
.c-lab   { font-family: var(--font-mono); font-size: 10px; fill: var(--biz-soft); }
.c-lab.strong { fill: var(--biz-ink); font-weight: 600; }
.c-lab.peak   { fill: var(--chart-peak); font-weight: 600; }
.c-mark  { stroke: var(--chart-peak); stroke-width: 1.4; stroke-dasharray: 3 3; }
.c-mark2 { stroke: var(--pine); stroke-width: 1.4; stroke-dasharray: 3 3; }
.c-line-air { fill: none; stroke: var(--chart-bar); stroke-width: 2.2; stroke-linejoin: round; }
.c-line-sea { fill: none; stroke: var(--chart-bar-2); stroke-width: 2.2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.c-dot-air  { fill: var(--chart-bar); }
.c-dot-sea  { fill: var(--chart-bar-2); }
:root[data-theme="dark"] body.biz .c-mark2 { stroke: #7fd6bd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .c-mark2 { stroke: #7fd6bd; }
}

/* chart key, words not colours alone */
.ckey {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--biz-soft);
}
.ckey span { display: inline-flex; align-items: center; gap: 7px; }
.ckey i { display: inline-block; width: 20px; height: 0; border-top-width: 2.5px; border-top-style: solid; }
.ckey i.air { border-color: var(--chart-bar); }
.ckey i.sea { border-color: var(--chart-bar-2); border-top-style: dashed; }
/* matches the dashed 17:00 marker drawn on the day chart */
.ckey i.mark2 { border-color: var(--pine); border-top-style: dashed; }
:root[data-theme="dark"] body.biz .ckey i.mark2 { border-color: #7fd6bd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz .ckey i.mark2 { border-color: #7fd6bd; }
}
.ckey i.blk { height: 11px; width: 11px; border: 0; border-radius: 3px; }
.ckey i.blk.bar  { background: var(--chart-bar); }
.ckey i.blk.peak { background: var(--chart-peak); }

/* ======================================================== callouts
   The two or three facts from a chart that change what an owner does. */

.callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 18px 0 0;
}
.callout {
  border: 1px solid var(--biz-line);
  border-radius: 14px;
  padding: 14px 15px;
  background: var(--biz-quiet);
}
.callout .k {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--biz-soft);
  display: block;
  margin: 0 0 6px;
}
.callout .v {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--biz-ink);
  display: block;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.callout .v.accent { color: var(--bougie); }
.callout p { margin: 6px 0 0; font-size: .8rem; color: var(--biz-soft); line-height: 1.45; }

/* ======================================================== arrivals */

.arrgroup + .arrgroup { margin-top: 26px; }
.arrgroup > h4 {
  font-family: var(--font-sans);
  font-size: .98rem;
  font-weight: 600;
  color: var(--biz-ink);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.arrgroup > .arrnote {
  font-size: .84rem;
  color: var(--biz-soft);
  margin: 0 0 12px;
  line-height: 1.5;
}

.arrlist { list-style: none; margin: 0; padding: 0; }
.arrlist li {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 4px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--biz-line);
  align-items: baseline;
}
.arrlist li:last-child { border-bottom: 1px solid var(--biz-line); }
.arrlist .t {
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 600;
  color: var(--biz-ink);
  letter-spacing: -.02em;
}
.arrlist .who { min-width: 0; }
.arrlist .who b { display: block; font-weight: 600; font-size: .9rem; color: var(--biz-ink); }
.arrlist .who span { display: block; font-size: .82rem; color: var(--biz-soft); line-height: 1.45; }
.arrlist .cap {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--biz-soft);
  text-align: right;
  white-space: nowrap;
}
.arrlist .src {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--biz-soft);
  opacity: .85;
  line-height: 1.5;
  margin-top: 2px;
}
.arrlist details > summary {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--biz-soft);
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.arrlist details > summary::-webkit-details-marker { display: none; }
.arrlist details > summary:hover { color: var(--bougie); }
.arrlist details > summary:focus-visible { outline: 2px solid var(--bougie); outline-offset: 3px; border-radius: 6px; }
.arrlist details p { margin: 6px 0 0; font-size: .74rem; color: var(--biz-soft); line-height: 1.55; }

/* the state we are honest about: we do not know */
.dontknow {
  border: 1px dashed var(--chart-axis);
  border-radius: 14px;
  padding: 16px 18px;
  background: transparent;
}
.dontknow p { margin: 0 0 8px; font-size: .88rem; color: var(--biz-soft); line-height: 1.55; }
.dontknow p:last-child { margin-bottom: 0; }
.dontknow b { color: var(--biz-ink); font-weight: 600; }

/* ======================================================= what to do */

.prep { list-style: none; margin: 0; padding: 0; }
.prep li {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 4px 16px;
  padding: 15px 0;
  border-top: 1px solid var(--biz-line);
  align-items: baseline;
}
.prep li:first-child { border-top: 0; padding-top: 4px; }
.prep .when {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bougie);
  letter-spacing: -.02em;
}
.prep .what { font-size: .93rem; color: var(--biz-ink); line-height: 1.55; }
.prep .what b { font-weight: 600; }
.prep .what em { font-style: normal; color: var(--biz-soft); font-size: .84rem; display: block; margin-top: 3px; }

/* ====================================================== the tables */

body.biz .tooltable {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 480px;
}
.tooltable th, .tooltable td {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--biz-line);
  vertical-align: baseline;
}
.tooltable thead th {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--biz-soft);
  font-weight: 600;
  border-bottom: 1px solid var(--chart-axis);
}
.tooltable td.num, .tooltable th.num {
  font-family: var(--font-mono);
  text-align: right;
  padding-right: 16px;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}
.tooltable tbody th { font-weight: 600; color: var(--biz-ink); white-space: nowrap; }
.tooltable td { color: var(--biz-soft); }
.tooltable tr.is-peak th, .tooltable tr.is-peak td.num { color: var(--bougie); }
/* The season table is wider than a phone and scrolls sideways. If the word
   columns wrap out of sight they stretch rows the reader cannot see the cause
   of, so they hold one line and the reader pushes the table instead. */
#season-body .tooltable td { white-space: nowrap; }
/* A table narrow enough to fit a phone without scrolling at all. */
body.biz .tooltable.tight { min-width: 0; font-size: .85rem; }
body.biz .tooltable.tight th,
body.biz .tooltable.tight td { padding-right: 0; }
body.biz .tooltable.tight td.num,
body.biz .tooltable.tight th.num { padding-right: 4px; }

.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ======================================================== phone */

@media (max-width: 860px) {
  .ctrlgrid { grid-template-columns: 1fr 1fr; }
  .ctrl.wide { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .ctrlgrid { grid-template-columns: 1fr; gap: 14px; }
  .panel { padding: 18px 15px; border-radius: 14px; }
  .honesty { padding: 18px 16px; border-radius: 14px; }
  .controls { padding: 16px 15px; border-radius: 14px; }
  .callouts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .callout { padding: 11px 12px; }
  .callout .v { font-size: 1.15rem; }
  .arrlist li { grid-template-columns: 54px 1fr; }
  .arrlist .cap { grid-column: 1 / -1; text-align: left; margin-top: 2px; }
  /* A table wider than the phone needs to say so, or it reads as a table with
     columns missing rather than a table you can push sideways. */
  .scrollx:has(.tooltable:not(.tight))::after {
    content: "Push the table sideways to see the rest";
    display: block;
    font-family: var(--font-mono);
    font-size: .62rem;
    color: var(--biz-soft);
    padding: 8px 0 0;
    position: sticky;
    left: 0;
  }
  .prep li { grid-template-columns: 1fr; gap: 3px; }
  .prep .when { font-size: .86rem; }
  .ctrlfoot .saved { margin-left: 0; width: 100%; }

  /* Everything a thumb has to hit gets 44px of height on a phone. The type
     stays the size it was; only the hit area grows, so nothing reflows. */
  .ctrl select,
  .ctrl input[type="date"] { min-height: 44px; }
  .switch { min-height: 44px; }
  .btn-plain { min-height: 44px; padding: 7px 18px; }
  details.srcbox > summary,
  .arrlist details > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
@media (max-width: 400px) {
  .callouts { grid-template-columns: 1fr; }
}

/* Almost no motion on the business side, and none at all if asked. */
@media (prefers-reduced-motion: reduce) {
  body.biz * { animation: none !important; transition: none !important; }
}