/* =====================================================================
   The Skiathos Guide — the free business check
   Scoped under body.biz so nothing here can reach a visitor page.

   Six colours only, from style.css: --deep --pine --shallow --wash
   --sandy --bougie. Two extra tokens below are chart-only aliases that
   swap for dark mode; they resolve to those same six.

   Nothing in a chart is carried by colour alone. Every bar states its
   number in words, every band is numbered, and the "you" state is always
   written out as well as drawn.
   ===================================================================== */

body.biz {
  --bc-bar:    var(--pine);
  --bc-bar-2:  var(--deep);
  --bc-track:  color-mix(in srgb, var(--deep) 10%, transparent);
  --bc-grid:   color-mix(in srgb, var(--deep) 26%, transparent);
  --bc-mark:   var(--bougie);

  /* The four presence groups are one colour at four brightnesses, so the
     order survives a colour-blind eye, a photocopier and a phone in the
     sun. Each block is numbered as well, and the legend repeats it. */
  --bc-s1: var(--deep);
  --bc-s2: color-mix(in srgb, var(--deep) 74%, var(--wash));
  --bc-s3: color-mix(in srgb, var(--deep) 40%, var(--wash));
  --bc-s4: color-mix(in srgb, var(--deep) 20%, var(--wash));
  --bc-s1t: var(--wash);
  --bc-s2t: var(--wash);
  --bc-s3t: var(--deep);
  --bc-s4t: var(--deep);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.biz {
    --bc-bar:   var(--shallow);
    --bc-bar-2: color-mix(in srgb, var(--shallow) 62%, var(--wash));
    --bc-track: color-mix(in srgb, var(--shallow) 12%, transparent);
    --bc-grid:  color-mix(in srgb, var(--shallow) 42%, transparent);
    --bc-mark:  color-mix(in srgb, var(--bougie) 62%, #fff);

    --bc-s1: var(--shallow);
    --bc-s2: color-mix(in srgb, var(--shallow) 82%, var(--deep));
    --bc-s3: color-mix(in srgb, var(--shallow) 42%, var(--deep));
    --bc-s4: color-mix(in srgb, var(--shallow) 20%, var(--deep));
    --bc-s1t: var(--deep);
    --bc-s2t: var(--deep);
    --bc-s3t: #eef4f2;
    --bc-s4t: #eef4f2;
  }
}
:root[data-theme="dark"] body.biz {
  --bc-bar:   var(--shallow);
  --bc-bar-2: color-mix(in srgb, var(--shallow) 62%, var(--wash));
  --bc-track: color-mix(in srgb, var(--shallow) 12%, transparent);
  --bc-grid:  color-mix(in srgb, var(--shallow) 42%, transparent);
  --bc-mark:  color-mix(in srgb, var(--bougie) 62%, #fff);

  --bc-s1: var(--shallow);
  --bc-s2: color-mix(in srgb, var(--shallow) 82%, var(--deep));
  --bc-s3: color-mix(in srgb, var(--shallow) 42%, var(--deep));
  --bc-s4: color-mix(in srgb, var(--shallow) 20%, var(--deep));
  --bc-s1t: var(--deep);
  --bc-s2t: var(--deep);
  --bc-s3t: #eef4f2;
  --bc-s4t: #eef4f2;
}

/* ------------------------------------------------------- the picker */

.bc-pick { max-width: 680px; }

.bc-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--biz-soft);
  margin-bottom: 10px;
}

.bc-field { position: relative; }

.bc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 17px 92px 17px 20px;
  font-family: var(--font-sans);
  font-size: 1.06rem;
  color: var(--biz-ink);
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bc-input::placeholder { color: var(--biz-soft); opacity: .72; }
.bc-input:focus {
  outline: none;
  border-color: var(--deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shallow) 44%, transparent);
}
:root[data-theme="dark"] body.biz .bc-input:focus,
body.biz .bc-input:focus { border-color: color-mix(in srgb, var(--deep) 60%, var(--shallow)); }

.bc-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--biz-line);
  background: transparent;
  color: var(--biz-soft);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.bc-clear:hover { color: var(--biz-ink); border-color: var(--biz-soft); }
/* A thumb has to be able to hit this. The pill keeps its printed size and
   grows a 44px hit area around the text instead. */
.bc-clear { min-height: 44px; display: inline-flex; align-items: center; }
.bc-clear:focus-visible { outline: 2px solid var(--bougie); outline-offset: 2px; }
.bc-clear[hidden] { display: none; }

.bc-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 340px;
  overflow-y: auto;
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.bc-list[hidden] { display: none; }

.bc-opt {
  padding: 11px 14px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bc-opt b { font-weight: 600; color: var(--biz-ink); font-size: .98rem; }
.bc-opt b mark {
  background: color-mix(in srgb, var(--shallow) 46%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.bc-opt span {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .05em;
  color: var(--biz-soft);
}
.bc-opt[aria-selected="true"] { background: var(--biz-band); }
.bc-opt[aria-selected="true"] b { text-decoration: underline; text-underline-offset: 3px; }

.bc-none { padding: 14px; color: var(--biz-soft); font-size: .92rem; }
.bc-none a { color: inherit; }

.bc-hint {
  margin: 12px 0 0;
  font-size: .86rem;
  color: var(--biz-soft);
  max-width: 62ch;
}
.bc-live {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--biz-soft);
  min-height: 1.1em;
}

/* --------------------------------------------------- the empty state */

.bc-empty {
  border: 1px dashed var(--biz-line);
  border-radius: 18px;
  padding: 40px 28px;
  text-align: center;
}
.bc-empty-t {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--biz-ink);
  margin: 0 0 8px;
}
.bc-empty-p { margin: 0; color: var(--biz-soft); font-size: .94rem; }

/* ================================================== JavaScript is off
   The search box and the whole check are worked out in the browser. With
   scripting off the box would accept typing and do nothing, which is worse
   than not offering it, so it is hidden and this takes its place. */
.bc-nojs {
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-left: 5px solid var(--deep);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: var(--shadow-lg);
}
.bc-nojs h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--biz-ink);
  margin: 0 0 10px;
}
.bc-nojs p { margin: 0 0 10px; color: var(--biz-soft); font-size: .95rem; line-height: 1.6; }
.bc-nojs p:last-child { margin-bottom: 0; }
.bc-nojs a { color: var(--biz-ink); }
@media (max-width: 620px) { .bc-nojs { padding: 18px 16px; border-radius: 14px; } }

/* --------------------------------------------------- report scaffold */

.bc-out { scroll-margin-top: 90px; }

.bc-top {
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  background: var(--biz-panel);
  padding: 26px 26px 22px;
}
.bc-top h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  font-weight: 600;
  color: var(--biz-ink);
  margin: 0 0 4px;
  line-height: 1.14;
}
.bc-where {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--biz-soft);
  margin: 0 0 16px;
}
.bc-note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--shallow);
  background: var(--biz-band);
  border-radius: 0 12px 12px 0;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--biz-soft);
  max-width: 74ch;
}
.bc-note b {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--biz-ink);
  margin-bottom: 6px;
  font-weight: 500;
}

.bc-conf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--biz-line);
  border-radius: 999px;
  padding: 6px 13px;
  color: var(--biz-soft);
}
.bc-conf i { font-style: normal; color: var(--biz-ink); }

.bc-warn {
  margin: 18px 0 0;
  border: 1px solid var(--bc-mark);
  border-radius: 14px;
  padding: 15px 17px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--biz-ink);
  max-width: 76ch;
}
.bc-warn b {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bc-mark);
  margin-bottom: 6px;
  font-weight: 500;
}
.bc-warn a { color: inherit; }

/* A block inside the report. Its own heading, its own strapline. */
.bc-block { margin-top: 46px; }
.bc-block > h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 600;
  color: var(--biz-ink);
  margin: 0 0 6px;
  line-height: 1.2;
}
.bc-block > .bc-lede {
  margin: 0 0 22px;
  color: var(--biz-soft);
  font-size: .96rem;
  max-width: 68ch;
}

/* ------------------------------------------------- what we found grid */

.bc-found {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}
.bc-found > div {
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  padding: 18px 18px 16px;
}
.bc-found dt {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--biz-soft);
  margin-bottom: 9px;
}
.bc-found dd {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--biz-ink);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.bc-found dd.mono {
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.bc-found dd.off { color: var(--biz-soft); font-weight: 500; }
.bc-found p {
  margin: 8px 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--biz-soft);
}

/* --------------------------------------------------------- verdicts */

.bc-ask { display: grid; gap: 14px; }
.bc-ask > div {
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  padding: 20px 20px 18px;
}
.bc-ask h4 {
  font-family: var(--font-sans);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--biz-ink);
  margin: 0 0 10px;
}
.bc-ask h4 em { font-style: normal; color: var(--biz-soft); font-weight: 500; }
.bc-ask p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--biz-soft); max-width: 72ch; }
.bc-ask p + p { margin-top: 8px; }

/* The verdict word carries the meaning. The shape only repeats it. */
.bc-v {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 13px 6px 10px;
  margin-bottom: 12px;
  border: 1px solid var(--biz-line);
  color: var(--biz-ink);
}
.bc-v::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  background: var(--bc-bar);
}
.bc-v.yes::before { border-radius: 50%; }
.bc-v.part::before {
  border-radius: 50%;
  background: linear-gradient(90deg, var(--bc-bar) 0 50%, transparent 50% 100%);
  border: 1px solid var(--bc-bar);
  box-sizing: border-box;
}
.bc-v.no::before { background: transparent; border: 1px solid var(--biz-soft); transform: rotate(45deg); }
.bc-v.na::before { background: var(--biz-line); border-radius: 2px; }

/* ------------------------------------------------------------- gaps */

.bc-band {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--biz-soft);
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--biz-line);
}
.bc-band:first-child { margin-top: 0; }

.bc-gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bc-gap {
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  padding: 20px 20px 18px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 16px;
}
.bc-gap .n {
  grid-row: 1 / span 4;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--wash);
  background: var(--deep);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.bc-gap h4 {
  font-family: var(--font-sans);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--biz-ink);
  margin: 0;
  line-height: 1.3;
}
.bc-gap p { margin: 8px 0 0; font-size: .94rem; line-height: 1.6; color: var(--biz-soft); max-width: 70ch; }
.bc-gap p.do { color: var(--biz-ink); }
.bc-gap p.do b {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--biz-soft);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
.bc-gap .t {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--biz-soft);
}
.bc-gap .t s { text-decoration: none; opacity: .72; }

/* Things already in place. Same shape, quieter, no numbering. */
.bc-good { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 74ch; }
.bc-good li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-top: 1px solid var(--biz-line);
  color: var(--biz-soft);
  font-size: .95rem;
  line-height: 1.55;
}
.bc-good li:last-child { border-bottom: 1px solid var(--biz-line); }
.bc-good li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.22em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bc-bar);
}
.bc-good b { color: var(--biz-ink); font-weight: 600; }

/* ------------------------------------------------------------ charts */

.bc-charts { display: grid; gap: 34px; }
.bc-chart {
  margin: 0;
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  padding: 22px 22px 18px;
}
.bc-chart > figcaption {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--biz-ink);
  margin: 0 0 16px;
  line-height: 1.35;
  max-width: 62ch;
}
.bc-canvas { overflow-x: auto; }
.bc-chart svg { display: block; width: 100%; height: auto; }
.bc-say {
  margin: 14px 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--biz-soft);
  max-width: 70ch;
}
.bc-say b { color: var(--biz-ink); font-weight: 600; }

/* SVG parts. Fills live here so dark mode swaps them in one place. */
.bc-track-r { fill: var(--bc-track); }
.bc-bar-r   { fill: var(--bc-bar); }
.bc-bar-r.alt { fill: var(--bc-bar-2); }
.bc-hatch-r { fill: var(--bc-track); stroke: var(--bc-grid); stroke-width: 1; }
.bc-axis-l  { stroke: var(--bc-grid); stroke-width: 1; }
.bc-t       { font-family: var(--font-sans); font-size: 13px; fill: var(--biz-ink); }
.bc-t.soft  { fill: var(--biz-soft); }
.bc-m       { font-family: var(--font-mono); font-size: 12px; fill: var(--biz-ink); font-variant-numeric: tabular-nums; }
.bc-m.soft  { fill: var(--biz-soft); font-size: 11px; letter-spacing: .04em; }
.bc-m.mine  { fill: var(--bc-mark); font-size: 11px; letter-spacing: .06em; }
.bc-seg-n   { font-family: var(--font-mono); font-size: 13px; }
.bc-mark-r  { fill: var(--bc-mark); }

.bc-s1 { fill: var(--bc-s1); }
.bc-s2 { fill: var(--bc-s2); }
.bc-s3 { fill: var(--bc-s3); }
.bc-s4 { fill: var(--bc-s4); }
.bc-sn1 { fill: var(--bc-s1t); }
.bc-sn2 { fill: var(--bc-s2t); }
.bc-sn3 { fill: var(--bc-s3t); }
.bc-sn4 { fill: var(--bc-s4t); }

.bc-legend {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.bc-legend li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: baseline;
  gap: 10px;
  font-size: .9rem;
  color: var(--biz-soft);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--biz-line);
}
.bc-legend .k {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--biz-ink);
}
.bc-legend .v {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--biz-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bc-legend li.mine { color: var(--biz-ink); }
.bc-legend li.mine .k { color: var(--bc-mark); }
.bc-legend li.mine em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bc-mark);
  margin-left: 8px;
}

/* --------------------------------------------------- the three fixes */

.bc-three {
  background: var(--deep);
  color: var(--wash);
  border-radius: 20px;
  padding: 34px 32px 28px;
  margin-top: 46px;
}
.bc-three h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  color: #fff;
  margin: 0 0 8px;
}
.bc-three > p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, .82);
  font-size: .97rem;
  max-width: 64ch;
}
.bc-three ol { list-style: none; counter-reset: fix; margin: 0; padding: 0; display: grid; gap: 0; }
.bc-three li {
  counter-increment: fix;
  position: relative;
  padding: 20px 0 20px 52px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.bc-three li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.bc-three li::before {
  content: counter(fix);
  position: absolute;
  left: 0;
  top: 22px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bougie);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .74rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bc-three h4 {
  font-family: var(--font-sans);
  font-size: 1.06rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
}
.bc-three p.w { margin: 0; color: rgba(255, 255, 255, .8); font-size: .93rem; line-height: 1.6; max-width: 62ch; }
.bc-three .t {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--shallow);
}
.bc-three .after {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: .87rem;
  max-width: 66ch;
}
.bc-three .after a { color: var(--shallow); }

.bc-foot {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--biz-line);
  font-size: .88rem;
  line-height: 1.65;
  color: var(--biz-soft);
  max-width: 76ch;
}
.bc-foot a { color: inherit; }
.bc-foot b { color: var(--biz-ink); font-weight: 600; }

/* ------------------------------------------------------------ narrow */

@media (max-width: 720px) {
  .bc-input { padding: 15px 84px 15px 16px; font-size: 1rem; }
  .bc-top { padding: 22px 18px 20px; }
  .bc-three { padding: 26px 20px 22px; }
  .bc-three li { padding-left: 44px; }
  .bc-gap { padding: 18px 16px 16px; grid-template-columns: 28px 1fr; gap: 4px 12px; }
  .bc-gap .n { width: 26px; height: 26px; font-size: .72rem; }
  .bc-chart { padding: 18px 14px 16px; }
  .bc-block { margin-top: 36px; }
}

/* ------------------------------------------------------------- print
   An owner is likely to print this and put it on the wall of the office. */

@media print {
  .masthead, .flagstripe, footer, .inpage, #pick, #missing, .bc-clear { display: none !important; }
  .bc-top, .bc-gap, .bc-chart, .bc-found > div, .bc-ask > div { break-inside: avoid; }
  .bc-three { background: none; color: #000; border: 1px solid #000; }
  .bc-three h3, .bc-three h4 { color: #000; }
  .bc-three p.w, .bc-three > p, .bc-three .after { color: #333; }
  .bc-three .t { color: #555; }
}