/* =====================================================================
   icons.css — icon and graphic language for The Skiathos Guide
   ---------------------------------------------------------------------
   Pairs with assets/icons.js, which injects the <symbol> sprite.
   Six colours, three faces, radius 18. Nothing new is invented here.

   The idea behind every component below: a number deserves a picture,
   and a qualifier is said once for a group, never on every card in it.

   Components
     .sg-cap        say it once, above a group
     .sg-stats      a set of numbers with icons     (.sg-stat)
     .sg-facts      a scannable list of facts       (.sg-fact)
     .sg-steps      numbered steps, joined by a line(.sg-step)
     .sg-compare    two things, a winner in words   (.sg-side)
     .sg-spark      a tiny line, no axes
     .sg-shift      one value moving between two points
     .sg-callout    calm, never alarming
     .sg-inline     an icon and its word, together
   ===================================================================== */

:root {
  /* The icon key colour. Pine on paper, shallow water in the dark. */
  --ic-key: #1f5d4c;
  --ic-tint: color-mix(in srgb, #6fc5c0 20%, transparent);
  --ic-tint-soft: color-mix(in srgb, #6fc5c0 8%, transparent);
  --ic-radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ic-key: #8fd6d1;
    --ic-tint: color-mix(in srgb, #6fc5c0 16%, transparent);
    --ic-tint-soft: color-mix(in srgb, #6fc5c0 7%, transparent);
  }
}
:root[data-theme="dark"] {
  --ic-key: #8fd6d1;
  --ic-tint: color-mix(in srgb, #6fc5c0 16%, transparent);
  --ic-tint-soft: color-mix(in srgb, #6fc5c0 7%, transparent);
}

/* =======================================================  1. THE ICONS  */
/* Stroke, fill and joins are set once here and inherit into every symbol,
   so the sprite itself carries no presentation attributes. */
.ic {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  flex: none;
  vertical-align: -.19em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The stroke thins as the icon grows, so every size carries the same weight. */
.ic-xs  { width: .9em;   height: .9em;   vertical-align: -.13em; stroke-width: 2.05; }
.ic-sm  { width: 1em;    height: 1em;    vertical-align: -.16em; stroke-width: 1.9; }
.ic-lg  { width: 1.45em; height: 1.45em; vertical-align: -.26em; stroke-width: 1.6; }
.ic-xl  { width: 1.9em;  height: 1.9em;  vertical-align: -.38em; stroke-width: 1.45; }
.ic-2xl { width: 2.6em;  height: 2.6em;  vertical-align: -.56em; stroke-width: 1.3; }

/* Colour is support, never the message. The word beside the icon carries it. */
.ic-key    { color: var(--ic-key); }
.ic-soft   { color: var(--text-soft, #4d6b73); }
.ic-accent { color: var(--bougie, #c8355f); }

/* An icon in a soft disc, for the head of a card or a step. */
.ic-badge {
  display: inline-grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: var(--ic-tint);
  color: var(--ic-key);
  flex: none;
}
.ic-badge .ic { vertical-align: 0; }

/* An icon and its word, kept together on one line. */
.sg-inline {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  white-space: nowrap;
}

/* ==================================================  2. SAY IT ONCE  */
/* One qualifier above a whole group: "Average for these dates".
   Put it inside .sg-stats and it spans the row. Put it above any other
   grid and it does the same job there. Never repeat it on the cards. */
.sg-cap {
  margin: 0 0 10px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft, #4d6b73);
}
.sg-cap .ic { color: var(--ic-key); vertical-align: -.2em; }

/* ======================================================  3. STATS  */
.sg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}
.sg-stats > .sg-cap { grid-column: 1 / -1; margin-bottom: 0; }

.sg-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 14px 14px 13px;
  border: 1px solid var(--line, #dfe4e0);
  border-radius: var(--ic-radius);
  background: var(--bg-alt, #fff);
}
.sg-stat > .ic { color: var(--ic-key); width: 1.5em; height: 1.5em; vertical-align: 0; stroke-width: 1.6; }

.sg-stat-v {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text, #0a3a47);
}
/* The unit rides small beside the number, and stays mono. */
.sg-stat-v i,
.sg-stat-v .u {
  font-style: normal;
  font-size: .58em;
  letter-spacing: 0;
  color: var(--text-soft, #4d6b73);
  margin-left: 1px;
}
.sg-stat-k {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .8rem;
  line-height: 1.25;
  color: var(--text-soft, #4d6b73);
}

/* Inside a card that already has a border, drop the boxes. */
.sg-stats.plain .sg-stat { border: 0; background: none; padding: 4px 0 0; }

/* ===================================================  4. FACT ROWS  */
.sg-facts {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.sg-fact {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line, #dfe4e0);
}
.sg-fact:last-child { border-bottom: 0; }
.sg-fact > .ic { color: var(--ic-key); align-self: center; }
.sg-fact-k {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .93rem;
  line-height: 1.35;
  color: var(--text, #0a3a47);
}
.sg-fact-v {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
  font-size: .88rem;
  letter-spacing: -.01em;
  text-align: right;
  color: var(--text, #0a3a47);
  white-space: nowrap;
}
.sg-fact-v small {
  font-size: .82em;
  color: var(--text-soft, #4d6b73);
}
/* Boxed variant, for a list that stands on its own. */
.sg-facts.boxed {
  border: 1px solid var(--line, #dfe4e0);
  border-radius: var(--ic-radius);
  background: var(--bg-alt, #fff);
  padding: 4px 16px;
}

/* =======================================================  5. STEPS  */
.sg-steps {
  counter-reset: sgstep;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}
.sg-step {
  position: relative;
  counter-increment: sgstep;
  padding: 0 0 22px 46px;
  min-height: 32px;
}
.sg-step:last-child { padding-bottom: 0; }
.sg-step::before {
  content: counter(sgstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .84rem;
  color: var(--ic-key);
  background: var(--bg-alt, #fff);
  border: 1px solid var(--line, #dfe4e0);
}
/* the connecting line */
.sg-step::after {
  content: "";
  position: absolute;
  left: 15.5px;
  top: 36px;
  bottom: 4px;
  width: 1px;
  background: var(--line, #dfe4e0);
}
.sg-step:last-child::after { display: none; }

.sg-step h3,
.sg-step h4 {
  margin: 5px 0 4px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}
.sg-step p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text-soft, #4d6b73);
}

/* Icons instead of numbers. Add .with-icons and give each step a marker. */
.sg-steps.with-icons .sg-step::before { display: none; }
.sg-step-ic {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ic-key);
  background: var(--bg-alt, #fff);
  border: 1px solid var(--line, #dfe4e0);
}
.sg-step-ic .ic { vertical-align: 0; }

/* =====================================================  6. COMPARE  */
.sg-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
.sg-side {
  border: 1px solid var(--line, #dfe4e0);
  border-radius: var(--ic-radius);
  background: var(--bg-alt, #fff);
  padding: 16px 16px 8px;
}
.sg-side > h3,
.sg-side > h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.12rem;
  font-weight: 600;
}
.sg-side > h3 .ic,
.sg-side > h4 .ic { color: var(--ic-key); vertical-align: 0; }
.sg-side .sg-facts { margin: 8px 0 4px; }

/* The winner is marked in words. The tint only agrees with the words. */
.sg-side.is-best {
  border-color: color-mix(in srgb, var(--ic-key) 45%, var(--line, #dfe4e0));
  background: var(--ic-tint-soft);
}
.sg-best {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ic-tint);
  color: var(--ic-key);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
/* One plain line under the pair, saying which and why. */
.sg-verdict {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 18px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text, #0a3a47);
}
.sg-verdict > .ic { color: var(--ic-key); margin-top: .15em; }

/* ===================================  7. SPARKLINE + TWO-POINT CHANGE  */
.sg-spark {
  display: inline-block;
  width: 104px;
  height: 28px;
  vertical-align: -.32em;
  color: var(--ic-key);
  overflow: visible;
}
.sg-spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The end dot is a zero-length path, so a round cap draws it. It survives being
   stretched to any width, which a <circle> would not. */
.sg-spark-dot {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
}
/* Dropped into a stat card it runs the full width, under the label. */
.sg-stat > [data-spark] { display: block; width: 100%; margin-top: 2px; }
.sg-stat > [data-spark] .sg-spark { width: 100%; height: 26px; vertical-align: 0; }
/* An optional flat rule behind the line, for "this is the average". */
.sg-spark-base {
  fill: none;
  stroke: var(--line, #dfe4e0);
  stroke-width: 1.25;
}

.sg-shift {
  display: block;
  width: 176px;
  max-width: 100%;
  height: 44px;
  margin: 10px 0;
  color: var(--ic-key);
}
.sg-shift-v {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 15px;
  font-weight: 500;
  fill: var(--text, #0a3a47);
}
.sg-shift-l {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 10.5px;
  letter-spacing: .04em;
  fill: var(--text-soft, #4d6b73);
}
.sg-shift-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}
.sg-shift-dot { fill: currentColor; stroke: none; }

/* =====================================================  8. CALLOUT  */
/* Calm. A left rule, a soft tint, no red, no shouting. */
.sg-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--line, #dfe4e0);
  border-left: 3px solid var(--ic-key);
  border-radius: var(--ic-radius);
  background: var(--ic-tint-soft);
}
.sg-callout > .ic {
  color: var(--ic-key);
  width: 1.4em;
  height: 1.4em;
  stroke-width: 1.65;
  margin-top: .1em;
  vertical-align: 0;
}
.sg-callout-t {
  margin: 0 0 3px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ic-key);
}
.sg-callout p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text, #0a3a47);
}
.sg-callout p + p { margin-top: 8px; }
/* Worth checking, still calm: warm sand instead of the sea. */
.sg-callout.warn {
  border-left-color: color-mix(in srgb, var(--sandy, #e8dcc8) 82%, var(--text, #0a3a47));
  background: color-mix(in srgb, var(--sandy, #e8dcc8) 34%, transparent);
}
.sg-callout.warn > .ic,
.sg-callout.warn .sg-callout-t {
  color: color-mix(in srgb, var(--sandy, #e8dcc8) 30%, var(--text, #0a3a47));
}

/* ===================================================  9. SMALL SCREENS  */
@media (max-width: 640px) {
  .sg-compare { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .sg-stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .sg-stat { padding: 11px 11px 10px; gap: 6px; }
  .sg-stat-v { font-size: 1.32rem; }
  .sg-stat-k { font-size: .76rem; }
  .sg-step { padding-left: 42px; }
  .sg-facts.boxed { padding: 4px 13px; }
  .sg-callout { padding: 13px 14px; gap: 10px; }
}

/* ==============================================  10. BUSINESS PAGES  */
/* Calmer: no tint, no discs, the key colour only where it must be. */
body.biz .sg-stat > .ic,
body.biz .sg-fact > .ic { color: var(--text-soft, #4d6b73); }
body.biz .ic-badge { background: var(--bg-sunk, #eef2f0); color: var(--text, #0a3a47); }
body.biz .sg-callout { background: var(--bg-alt, #fff); }
body.biz .sg-side.is-best { background: var(--bg-alt, #fff); }

/* ================================================  11. QUIET MOTION  */
/* Nothing here animates. If anything is ever added, it stops here. */
@media (prefers-reduced-motion: reduce) {
  .ic, .ic-badge, .sg-stat, .sg-fact, .sg-step, .sg-side,
  .sg-spark, .sg-shift, .sg-callout {
    transition: none !important;
    animation: none !important;
  }
}

/* ==================================================  12. FORCED COLOURS  */
@media (forced-colors: active) {
  .sg-stat, .sg-side, .sg-callout, .sg-facts.boxed,
  .sg-step::before, .sg-step-ic, .ic-badge { border: 1px solid CanvasText; }
  .ic { stroke: CanvasText; }
}