/* ------------------------------------------------------------------
   VALOKALENTERI
   Design tokens. The whole palette is one idea: a Finnish 24h day.
   Night is the ground, daylight is the only warm thing on the page.
   ------------------------------------------------------------------ */
:root{
  /* UI surface tokens — swapped wholesale by the theme switch */
  --bg:        #0A0E1C;
  --surface:   #141C2E;
  --surface-2: #1D2740;
  --line:      #2C3956;
  --text:      #F3F6FB;
  --text-2:    #B7C3D8;
  --text-3:    #8C99B2;
  --red:       #FF8A8A;
  --accent:    #5BE8B5;

  /* Chart tokens — the daylight strip is always drawn on night,
     in both themes, so these are tuned for the strip, not the page */
  --c-night:   #23304F;
  --c-twilight:#425CB0;
  --c-day:     #FFB43D;
  --c-daysoft: #9A7434;

  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r: 4px;
}

html[data-theme="light"]{
  --bg:        #F2F5FA;
  --surface:   #FFFFFF;
  --surface-2: #E8EDF6;
  --line:      #C8D2E2;
  --text:      #0E1526;
  --text-2:    #445064;
  --text-3:    #667286;
  --red:       #C41E3A;
  --accent:    #0C8F6A;

  --c-night:   #1F2C49;
  --c-twilight:#5A73C6;
  --c-day:     #F5A623;
  --c-daysoft: #B9853A;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
  padding:20px;
  min-height:100vh;
}
button,select{font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
main{touch-action:pan-y}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wrap{max-width:1180px;margin:0 auto}

/* ---------- masthead ---------- */
.masthead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;margin-bottom:22px;
}
.brand{display:flex;align-items:baseline;gap:12px}
.brand h1{
  font-size:20px;font-weight:700;margin:0;
  letter-spacing:-0.02em;
}
.brand .sub{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:0.14em;text-transform:uppercase}

.now{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-family:var(--mono)}
.now .row{display:flex;align-items:baseline;gap:12px}
/* the day you are standing in, drawn end to end */
.daystrip{width:290px;max-width:100%}
.striptrack{position:relative;height:14px;border-radius:2px;border:1px solid var(--line)}
.stripmark{
  position:absolute;top:-1px;width:2px;height:16px;background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(0,0,0,.8);transform:translateX(-1px);
}
.stripends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-3);margin-top:4px;letter-spacing:0.02em}
.stripends .mid{color:var(--text-2)}
.now .clock{font-size:27px;font-weight:600;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.now .clock .sec{color:var(--text-3)}
.now .tz{font-size:11px;color:var(--text-3);letter-spacing:0.1em}

/* city picker: ordered by latitude, because on this page latitude is the point */
.picker{display:flex;align-items:center;gap:8px}
.picker label{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:0.1em;text-transform:uppercase}
select{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:7px 10px;font-size:14px;
  min-width:210px;
}
select:hover{border-color:var(--text-3)}

/* ---------- layout ---------- */
.grid{
  display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;align-items:start;
  grid-template-areas:"cal panel" "ribbon panel";
}
main{grid-area:cal;min-width:0}
.panel{grid-area:panel}
.ribbon-block{grid-area:ribbon;min-width:0}

/* ---------- month navigation ---------- */
.monthbar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.toolbar{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}

/* segmented control — used for view mode and ribbon scope */
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{
  background:var(--surface);border:0;padding:7px 12px;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--text-3);
}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--text)}
.seg button:hover{color:var(--text)}

/* nameday search */
.search{position:relative}
.search input{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:7px 11px;font-size:13.5px;width:178px;color:var(--text);font-family:var(--sans);
}
.search input::placeholder{color:var(--text-3)}
.search input:hover{border-color:var(--text-3)}
.results{
  position:absolute;top:calc(100% + 5px);left:0;z-index:30;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  min-width:214px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.4);
}
.results button{
  display:flex;justify-content:space-between;gap:16px;width:100%;
  background:none;border:0;padding:7px 12px;cursor:pointer;
  font-size:13.5px;text-align:left;font-family:var(--sans);
}
.results button:hover,.results button.hi{background:var(--surface-2)}
.results .dt{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.results .none{padding:9px 12px;font-size:12.5px;color:var(--text-3)}

/* week focus mode */
.weekview{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.wkhead{display:grid;grid-template-columns:48px repeat(7,1fr);border-bottom:1px solid var(--line)}
.wkhead .corner{border-right:1px solid var(--line)}
.wkday{
  padding:8px 9px;border:0;border-right:1px solid var(--line);
  background:none;cursor:pointer;text-align:left;
}
.wkday.sel{background:var(--surface-2)}
.wkday.today{box-shadow:inset 0 2px 0 var(--accent)}
.wkday .wd{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.wkday .dn{font-family:var(--mono);font-size:19px;font-weight:700;line-height:1.15;color:var(--text)}
.wkday.holiday .dn,.wkday.holiday .wd{color:var(--red)}
.wkday .nmw{font-size:11px;color:var(--text-2);height:15px;overflow:hidden;margin-top:1px}
.wkgrid{display:grid;grid-template-columns:48px repeat(7,1fr);background:var(--c-night)}
.wkh{
  font-family:var(--mono);font-size:10.5px;color:var(--text-3);
  height:18px;line-height:18px;text-align:right;padding-right:8px;
  border-right:1px solid var(--line);background:var(--surface);
}
.wkh.major{color:var(--text-2);font-weight:600}
.wkcell{height:18px;border-right:1px solid rgba(128,128,128,.16)}
.wkcell.major{border-top:1px solid rgba(128,128,128,.22)}
.h-day{background:var(--c-day)}
.h-gold{background:var(--c-day);opacity:.55}
.h-civil{background:var(--c-twilight)}
.h-naut{background:var(--c-twilight);opacity:.4}
.h-night{background:transparent}
.wkcell.nowcell{box-shadow:inset 0 0 0 2px var(--accent)}

/* photographer block */
.photo{margin-top:16px;border-top:1px solid var(--line);padding-top:13px}
.photo .phead{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.photo table{width:100%;border-collapse:collapse}
.photo th{
  font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);text-align:right;padding-bottom:5px;
}
.photo th:first-child{text-align:left}
.photo td{
  font-family:var(--mono);font-size:12px;font-weight:500;padding:3px 0;
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.photo td:first-child{text-align:left;font-family:var(--sans);font-size:12.5px;color:var(--text-2);font-weight:500}
.sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:-1px}

/* moon */
.moon{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.moon .mname{font-size:13px;font-weight:600}
.moon .mval{font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-top:1px}
.monthbar h2{
  margin:0;font-size:30px;font-weight:700;letter-spacing:-0.03em;
  text-transform:lowercase;
}
.monthbar h2 .yr{color:var(--text-3);font-weight:400}
.nav{display:flex;gap:4px;margin-left:auto}
.nav button, .today-btn{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;
  padding:6px 11px;font-size:14px;font-family:var(--mono);
}
.nav button:hover,.today-btn:hover{border-color:var(--text-2);background:var(--line)}
.today-btn{font-size:12px;letter-spacing:0.06em;text-transform:uppercase}
.theme-btn{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;padding:7px 12px;font-family:var(--mono);font-size:12px;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--text-2);
}
.theme-btn:hover{border-color:var(--text-3);color:var(--text)}

/* ---------- calendar ---------- */
table.cal{width:100%;border-collapse:collapse;table-layout:fixed}
table.cal th{
  font-family:var(--mono);font-size:10px;font-weight:500;
  color:var(--text-3);letter-spacing:0.14em;text-transform:uppercase;
  padding:0 0 8px;text-align:left;
}
table.cal th.wk{width:34px;text-align:center}
td.wk{
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-3);
  text-align:center;vertical-align:middle;
  border-right:1px solid var(--line);
}

.cell{
  width:100%;display:block;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;
  border-radius:var(--r);padding:7px 8px 6px;
  height:92px;position:relative;overflow:hidden;
}
.cell:hover{background:var(--surface);border-color:var(--line)}
.cell.sel{background:var(--surface);border-color:var(--text-2)}
.cell.today{border-color:var(--accent)}
.cell.out{opacity:0.42}
.cell .d{font-family:var(--mono);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;color:var(--text)}
.cell.holiday .d,.cell.sunday .d{color:var(--red)}
.cell .nm{
  font-size:12px;color:var(--text-2);line-height:1.32;font-weight:500;
  margin-top:9px;
  height:31px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

.cell.holiday .nm{color:var(--red)}
.cell .bar{
  position:absolute;left:8px;right:8px;bottom:7px;height:6px;
  border-radius:1px;
}
td{padding:1px;vertical-align:top}

/* ---------- panel ---------- */
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;
}
.panel .kicker{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-3)}
.panel .bigdate{font-size:30px;font-weight:700;letter-spacing:-0.03em;margin:2px 0 0}
.panel .weekday{font-size:14px;color:var(--text-2);text-transform:lowercase}
.panel .flag{
  display:inline-block;margin-top:8px;font-size:12px;color:var(--red);
  border:1px solid currentColor;border-radius:2px;padding:1px 7px;
}
.names{margin:14px 0 0;font-size:13.5px;line-height:1.55;font-weight:500}
.names em{font-style:normal;color:var(--text-3)}

.arc{margin:16px 0 4px}

dl.facts{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-family:var(--mono);font-size:13.5px;font-weight:500}
dl.facts dt{color:var(--text-3);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;align-self:center}
dl.facts dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
dd.gain{color:var(--accent)}
dd.loss{color:var(--c-day)}

/* ---------- ribbon ---------- */
.ribbon-block{margin-top:0}
.ribbon-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.ribbon-head h3{margin:0;font-size:13px;font-weight:500;letter-spacing:0.02em}
.ribbon-head .hint{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.ribbon{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:10px;
}
.ribbon svg{display:block;width:100%;height:auto}

.stats{display:flex;gap:0;flex-wrap:wrap;margin-top:12px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{flex:1 1 150px;padding:11px 13px;border-right:1px solid var(--line);background:var(--surface)}
.stat:last-child{border-right:none}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3)}
.stat .v{font-family:var(--mono);font-size:16px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}

footer{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--text-3);line-height:1.6}

/* ---------- tablet: one column, day panel above the ribbon ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:1fr;grid-template-areas:"cal" "panel" "ribbon";gap:18px}
  body{padding:16px}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  body{padding:12px;font-size:15px}
  .wrap{max-width:100%}

  /* masthead stacks; the two city pickers become a label/field grid */
  .masthead{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:12px;margin-bottom:16px}
  .brand h1{font-size:19px}
  .picker{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 10px;align-items:center}
  .picker select{width:100%;min-width:0;font-size:16px;padding:9px 10px}
  .picker .theme-btn{grid-column:1 / -1;justify-self:start;padding:9px 14px}
  .now{width:100%}
  .now .clock{font-size:30px}
  .daystrip{width:100%}
  .striptrack{height:16px}
  .stripmark{height:18px}
  .stripends{font-size:11px}

  /* toolbar: search on its own row, then mode switch and arrows */
  .monthbar{gap:10px;margin-bottom:12px}
  .monthbar h2{font-size:25px;width:100%}
  .toolbar{margin-left:0;width:100%;gap:8px}
  .search{flex:1 1 100%}
  .search input{width:100%;font-size:16px;padding:9px 12px}
  .results{width:100%;min-width:0}
  .seg button{padding:9px 12px}
  .nav{margin-left:auto}
  .nav button,.today-btn{padding:9px 14px}

  /* month grid: tighter cells, one line of names */
  th.wk{width:24px}
  table.cal th{font-size:9px;letter-spacing:.08em}
  td.wk{font-size:10px}
  .cell{height:66px;padding:5px 4px 4px}
  .cell .d{font-size:15px}
  .cell .nm{font-size:9.5px;height:13px;margin-top:6px;-webkit-line-clamp:1;line-height:1.3}
  .cell .bar{left:4px;right:4px;bottom:5px;height:5px}

  /* week grid */
  .wkgrid,.wkhead{grid-template-columns:32px repeat(7,minmax(0,1fr))}
  .wkday{padding:6px 3px}
  .wkday .dn{font-size:14px}
  .wkday .wd{font-size:9px;letter-spacing:.06em}
  .wkday .nmw{display:none}
  .wkh{font-size:9.5px;padding-right:5px;height:16px;line-height:16px}
  .wkcell{height:16px}

  /* the ribbon is stretched anyway, so give it a usable height */
  .ribbon svg{height:190px}
  .ribbon-head h3{font-size:12.5px}
  .ribbon-head .hint{font-size:10.5px;flex:1 1 100%;order:3}
  #scopeSeg{margin-left:auto}

  .stat{flex:1 1 44%;padding:10px 11px}
  .panel{padding:16px}
}

/* ---------- small phone ---------- */
@media (max-width:400px){
  body{padding:9px}
  .monthbar h2{font-size:22px}
  .cell{height:58px;padding:4px 3px}
  .cell .d{font-size:14px}
  .cell .nm{font-size:9px;height:12px;margin-top:4px}
  .cell .bar{left:3px;right:3px;height:4px;bottom:4px}
  th.wk{width:20px}
  td.wk{font-size:9px}
  .wkgrid,.wkhead{grid-template-columns:26px repeat(7,minmax(0,1fr))}
  .wkday .dn{font-size:12.5px}
  .stat{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==================================================================
   SITE CHROME — shared by all three pages
   ================================================================== */
.topbar{
  display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.logo{
  font-size:17px;font-weight:800;letter-spacing:-0.025em;
  text-decoration:none;color:var(--text);
}
.logo span{color:var(--c-day)}
.sitenav{display:flex;gap:2px;flex-wrap:wrap}
.sitenav a{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);text-decoration:none;
  padding:7px 11px;border-radius:var(--r);
}
.sitenav a:hover{color:var(--text);background:var(--surface)}
.sitenav a[aria-current="page"]{
  color:var(--text);background:var(--surface);box-shadow:inset 0 -2px 0 var(--accent);
}
.topactions{margin-left:auto;display:flex;gap:8px}
.pill{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:7px 13px;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.06em;cursor:pointer;color:var(--text-2);
}
.pill:hover{border-color:var(--text-3);color:var(--text)}

.pagehead{margin-bottom:18px}
.pagehead h1{font-size:33px;font-weight:800;letter-spacing:-0.035em;margin:0 0 7px;line-height:1.1}
.pagehead .lede{color:var(--text-2);font-size:16px;max-width:64ch;margin:0;line-height:1.55}

.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.controls label{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);
}
.controls select{min-width:0}
.field{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 12px;font-size:14px;color:var(--text);font-family:var(--sans);
}
.field::placeholder{color:var(--text-3)}
.field:hover{border-color:var(--text-3)}

.prose{max-width:70ch;font-size:15px;line-height:1.7;color:var(--text-2);margin-top:34px}
.prose h2{color:var(--text);font-size:20px;font-weight:700;letter-spacing:-.02em;margin:30px 0 9px}
.prose h3{color:var(--text);font-size:15px;font-weight:700;margin:20px 0 6px}
.prose p{margin:0 0 13px}
.prose ul{margin:0 0 13px;padding-left:20px}
.prose li{margin-bottom:5px}
.prose a{color:var(--accent)}
.prose strong{color:var(--text);font-weight:600}

.notice{
  border:1px solid var(--line);border-left:3px solid var(--c-day);
  background:var(--surface);border-radius:var(--r);
  padding:13px 15px;font-size:13px;line-height:1.6;color:var(--text-2);margin-top:26px;
}
.notice b{color:var(--text)}

/* ==================================================================
   NAMEDAY PAGE
   ================================================================== */
.todaycard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;margin-bottom:18px;
}
.todaycard .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.todaycard .v{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
.todaycard .d{font-family:var(--mono);font-size:12.5px;color:var(--text-3);margin-top:3px}

.ndmonths{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.ndmonth{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px}
.ndmonth h2{font-size:15px;font-weight:700;margin:0 0 10px;text-transform:lowercase;letter-spacing:-.01em}
.ndlist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:12.5px;align-items:baseline}
.ndlist .dd{font-family:var(--mono);font-size:11.5px;color:var(--text-3);text-align:right}
.ndlist a{color:var(--text-2);text-decoration:none}
.ndlist a:hover{color:var(--accent)}
.ndlist .none{color:var(--text-3);font-style:italic}
.ndlist .hol .dd,.ndlist .hol a{color:var(--red)}

.alphagrid{columns:4 210px;column-gap:22px}
.alphaletter{break-inside:avoid;margin:0 0 16px}
.alphaletter h3{
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);
  margin:0 0 6px;letter-spacing:.12em;border-bottom:1px solid var(--line);padding-bottom:4px;
}
.alpharow{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:1.5px 0}
.alpharow a{color:var(--text-2);text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.alpharow a:hover{color:var(--text)}
.alpharow .dd{font-family:var(--mono);font-size:11.5px;color:var(--text-3);flex:none}
.empty{color:var(--text-3);font-size:14px;padding:20px 0}

/* ==================================================================
   SUN TABLE PAGE
   ================================================================== */
.tablewrap{
  border:1px solid var(--line);border-radius:var(--r);
  overflow:auto;background:var(--surface);max-height:78vh;
}
table.sun{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.sun th,table.sun td{padding:7px 10px;text-align:right;white-space:nowrap}
table.sun thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-2);
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line);
}
table.sun thead th.sub{font-size:9px;color:var(--text-3);opacity:.75}
table.sun tbody td{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line);color:var(--text-2);
}
table.sun td.d,table.sun th.d{
  text-align:left;position:sticky;left:0;z-index:1;background:var(--surface);
  border-right:1px solid var(--line);color:var(--text);font-weight:600;
}
table.sun thead th.d{z-index:3;background:var(--surface-2)}
table.sun tr.we td{background:var(--surface-2)}
table.sun tr.we td.d{background:var(--surface-2);color:var(--red)}
table.sun tr.today td.d{color:var(--accent)}
table.sun td.blue{color:var(--c-twilight)}
table.sun td.gold{color:var(--c-day)}
table.sun td.gain{color:var(--accent)}
table.sun td.loss{color:var(--c-day)}
table.sun td.na{color:var(--text-3)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;font-size:12px;color:var(--text-3)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

.summary{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.summary .cell{flex:1 1 160px;padding:11px 14px;background:var(--surface);border-right:1px solid var(--line)}
.summary .cell:last-child{border-right:none}
.summary .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.summary .v{font-family:var(--mono);font-size:16px;font-weight:600;margin-top:3px;color:var(--text)}
.summary.compact .cell{flex:1 1 118px;padding:7px 11px}
.summary.compact .k{font-size:9px;letter-spacing:.1em}
.summary.compact .v{font-size:13px;font-weight:600;margin-top:1px}

@media (max-width:760px){
  .topbar{gap:8px 12px;margin-bottom:14px}
  .logo{font-size:16px}
  .sitenav a{padding:7px 9px;font-size:11px;letter-spacing:.06em}
  .topactions{margin-left:auto}
  .pagehead h1{font-size:26px}
  .pagehead .lede{font-size:15px}
  .alphagrid{columns:2 140px;column-gap:16px}
  .ndmonths{grid-template-columns:1fr}
  table.sun{font-size:12px}
  table.sun th,table.sun td{padding:6px 8px}
  .tablewrap{max-height:70vh}
  .prose{font-size:14.5px}
  .controls .field,.controls select{font-size:16px}
}
@media (max-width:400px){
  .alphagrid{columns:1}
}


/* ==================================================================
   WEEK CALENDAR — a whole year, months across, days down
   ================================================================== */
.yeargrid{
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--surface);
}
table.year{
  border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;
  table-layout:fixed;
}
table.year th,table.year td{padding:0;white-space:nowrap}
table.year thead th{
  background:var(--surface-2);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);
  padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;
}
table.year thead th.dn{
  text-align:right;padding-right:9px;width:40px;
}
table.year td.dn{
  background:var(--surface);
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text-3);
  text-align:right;padding-right:9px;
  border-right:1px solid var(--line);border-bottom:1px solid rgba(128,128,128,.12);
}
table.year td.day{
  border-bottom:1px solid rgba(128,128,128,.12);
  border-right:1px solid rgba(128,128,128,.12);
}
/* consecutive weeks alternate, so each week reads as one diagonal stripe */
td.wodd{background:var(--surface)}
td.weven{background:var(--surface-2)}
td.void{background:transparent;border-bottom:1px solid rgba(128,128,128,.12)}

.cellbtn{
  display:flex;align-items:center;gap:7px;height:26px;padding:0 9px;
  text-decoration:none;color:var(--text-2);
  font-family:var(--mono);font-size:11.5px;
}
.cellbtn:hover{background:rgba(128,128,128,.14)}
.cellbtn .wd{font-weight:500;letter-spacing:.02em}
td.sat .cellbtn .wd{color:var(--text-3)}
td.red .cellbtn .wd{color:var(--red);font-weight:700}
td.today .cellbtn{box-shadow:inset 0 0 0 2px var(--accent)}
td.curwk{box-shadow:inset 0 1px 0 rgba(91,232,181,.28),inset 0 -1px 0 rgba(91,232,181,.28)}

.cellbtn .wk{
  font-family:var(--mono);font-size:10px;font-weight:700;line-height:1;
  color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:3px;padding:2px 5px;
}
.cellbtn .wk.now{background:var(--accent);border-color:var(--accent);color:#06231A}
.cellbtn .nm{
  color:var(--text-3);font-family:var(--sans);font-size:10.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
/* flag days name themselves in the cell */
.cellbtn .hol{
  font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--red);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.cellbtn .hol.flag{color:var(--text-3);font-weight:500}
/* a red edge marks the days that are actually free, drawn over the week
   stripe rather than replacing it */
td.pyha .cellbtn{box-shadow:inset 3px 0 0 var(--red)}
td.pyha.today .cellbtn{box-shadow:inset 3px 0 0 var(--red),inset 0 0 0 2px var(--accent)}
table.year thead th .yr{color:var(--text-3);font-weight:500}
/* When the arrows lead the toolbar they stay put: no auto margin, and the
   label beside them reserves room for the longest month pair. */
.controls .nav:first-child{margin-left:0}
.rangelabel{
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);
  padding:0 4px;min-width:252px;text-align:center;
}
.legend i.swk{
  width:16px;height:11px;border:1px solid var(--line);background:var(--bg);border-radius:3px;
}

@media (max-width:760px){
  table.year thead th{font-size:9.5px;padding:7px 6px;letter-spacing:.06em}
  table.year thead th.dn,table.year td.dn{width:28px;padding-right:6px;font-size:11px}
  .cellbtn{height:26px;padding:0 7px;gap:5px;font-size:11px}
  .cellbtn .wk{font-size:9.5px;padding:1px 4px}
  .rangelabel{font-size:12.5px;min-width:0;flex:1 1 100%;text-align:left;padding:0}
  .summary.compact .cell{flex:1 1 45%}
}


/* ---------- generated pages ---------- */
.crumbs{font-family:var(--mono);font-size:11px;color:var(--text-3);margin:-6px 0 14px}
.crumbs a{color:var(--text-3);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs i{font-style:normal;opacity:.5;margin:0 4px}

.bigfact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin-bottom:16px}
.bigfact .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
.bigfact .v{font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:5px;line-height:1.15}
.bigfact .v a{color:var(--text);text-decoration:none}
.bigfact .v a:hover{color:var(--accent)}
.bigfact .d{font-family:var(--mono);font-size:13px;color:var(--text-3);margin-top:5px}

.morelinks{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0}
.morelinks a{font-family:var(--mono);font-size:11.5px;color:var(--text-2);text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px 11px}
.morelinks a:hover{border-color:var(--text-3);color:var(--text)}

.cardlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.cardlinks a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;text-decoration:none;display:block}
.cardlinks a:hover{border-color:var(--accent)}
.cardlinks b{display:block;font-size:16px;color:var(--text);margin-bottom:5px}
.cardlinks span{font-size:13.5px;color:var(--text-2);line-height:1.5}

.weekgridlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:5px;margin-bottom:20px}
.weekgridlinks a{font-family:var(--mono);font-size:11.5px;color:var(--text-2);text-decoration:none;
  padding:6px 9px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.weekgridlinks a:hover{border-color:var(--accent);color:var(--text)}
.weekgridlinks b{color:var(--text);margin-right:6px}

.footnav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:30px;padding-top:16px;
  border-top:1px solid var(--line)}
.footnav a{font-size:12.5px;color:var(--text-2);text-decoration:none}
.footnav a:hover{color:var(--text);text-decoration:underline}
footer{margin-top:14px!important;padding-top:0!important;border-top:none!important}

/* ---------- päivämäärävälilaskin ---------- */
.calcform{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.calcfield{flex:1 1 260px;min-width:0}
.calcfield label{display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.calcfield .pair{display:flex;gap:8px}
.calcfield .pair .field{flex:1 1 auto;min-width:0;font-size:15px}
.calcfield .pair .field[type=time]{flex:0 0 104px}
.swapbtn{align-self:flex-end;margin-bottom:1px;font-size:15px;line-height:1;padding:9px 13px}

.units{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:16px 0}
.unit{padding:13px 15px;background:var(--surface);border-right:1px solid var(--line)}
.unit:last-child{border-right:none}
.unit .k{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.unit .v{font-family:var(--mono);font-size:21px;font-weight:700;color:var(--text);
  margin-top:4px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.unit .n{font-size:11px;color:var(--text-3);margin-top:2px}

#warn .notice{margin-top:14px}

@media (max-width:760px){
  .calcform{padding:14px;gap:12px}
  .calcfield{flex:1 1 100%}
  .swapbtn{align-self:center;margin:0 auto}
  .units{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .unit .v{font-size:18px}
}

/* ---------- print: the wall planner ---------- */
@media print{
  @page{size:A4 landscape;margin:8mm}
  html[data-theme]{--bg:#fff;--surface:#fff;--surface-2:#f4f4f4;--line:#bbb;
    --text:#000;--text-2:#333;--text-3:#666;--red:#b00020;--accent:#000;
    --c-night:#e8e8e8;--c-twilight:#c9c9c9;--c-day:#f2f2f2;--c-daysoft:#999}
  body{padding:0;font-size:9pt;background:#fff}
  .topbar,.sitenav,.topactions,.controls,.crumbs,.prose,footer,.legend,
  .morelinks,.summary,.notice,.printhide{display:none!important}
  .pagehead{margin-bottom:4mm}
  .pagehead h1{font-size:15pt}
  .pagehead .lede{display:none}
  .yeargrid{border:1px solid #999;max-height:none;overflow:visible}
  table.year{font-size:7.5pt}
  .cellbtn{height:5.6mm;padding:0 1.2mm;gap:1.2mm;color:#000}
  .cellbtn .wk{background:#fff;border:1px solid #999;color:#000;font-size:6.5pt}
  .cellbtn .hol{font-size:6.5pt}
  td.weven{background:#f4f4f4}
  a{text-decoration:none;color:#000}
}