/* SeeYourself.Fit visual system: brand-led, responsive, calm, and readable. */
@import url('/app/css/fonts.css');
:root {
  color-scheme: light;
  --sky: #5da2d5;
  --coral: #f78888;
  --sunshine: #f3d250;
  --powder: #90ccf4;
  --deep: #245c85;
  --ink: #333333;
  --muted: #596976;
  --paper: #ffffff;
  --canvas: #f8fbfd;
  --line: #dce8ef;
  --soft-blue: #edf7fd;
  --focus: #145780;
  --shadow: 0 12px 42px rgb(36 92 133 / 6%);
  --font-body: 'Commissioner', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Contrail One', 'Trebuchet MS', Arial, sans-serif;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  font-synthesis: style; /* Keep emphasis legible; only Commissioner roman is supplied. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse 72% 280px at 96% 0%, rgb(144 204 244 / 26%), transparent 83%),
    linear-gradient(180deg, #f9fcfe 0%, #fff 56%, #fff 100%);
}
button, input { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a { color: var(--deep); text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link {
  position: fixed; top: -110px; left: 16px; z-index: 100;
  padding: 10px 18px; background: #fff; color: var(--deep);
  border: 2px solid var(--deep); border-radius: 14px; font-weight: 700;
}
.skip-link:focus { top: 12px; }
.site-shell { width: min(100%, 1050px); margin-inline: auto; padding-inline: clamp(14px, 3vw, 32px); }

/* Site branding is the supplied SVG, not redrawn display text. */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; position: relative; z-index: 12;
  padding: clamp(20px, 4.2vw, 34px) clamp(4px, 1vw, 8px) 22px;
}
.brand { display: block; width: min(70vw, 310px); flex-shrink: 1; }
.brand img { width: 100%; height: auto; display: block; }
.icon-button {
  appearance: none; display: grid; place-items: center; cursor: pointer;
  color: var(--deep); background: var(--paper); border: 1px solid var(--line);
  border-radius: 50%; min-width: 48px; min-height: 48px; padding: 9px;
  box-shadow: 0 5px 17px rgb(36 92 133 / 5%);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.icon-button:hover { background: var(--soft-blue); border-color: var(--powder); transform: translateY(-1px); }
.icon-button:active { transform: translateY(0); }
.menu-toggle { width: 52px; height: 52px; }
.hamburger { display: flex; flex-direction: column; gap: 5px; width: 23px; }
.hamburger span { display: block; width: 100%; height: 2.5px; background: currentColor; border-radius: 4px; }
.hamburger span:nth-child(2) { width: 75%; align-self: flex-end; }
.site-menu {
  position: absolute; z-index: 20; top: calc(100% - 12px); right: 4px;
  width: min(270px, calc(100vw - 28px)); padding: 9px;
  border: 1px solid var(--line); border-radius: 21px;
  background: #fff; box-shadow: 0 15px 46px rgb(36 92 133 / 16%);
}
.site-menu a { display: block; padding: 12px 16px; border-radius: 13px; text-decoration: none; font-weight: 700; color: var(--deep); }
.site-menu a:hover, .site-menu a:focus-visible { background: var(--soft-blue); }

/* Announcement is a welcoming accent, not the wireframe's black slab. */
.announcement {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 0 clamp(16px, 3vw, 24px);
  padding: 14px clamp(18px, 4vw, 27px); border: 1px solid #d8effc;
  border-radius: 19px; background: linear-gradient(105deg, #eaf7fe 0%, #eff8fd 72%, #fff5e3 100%);
  color: #1e567b; font-weight: 700; text-align: center;
}
.announcement::before {
  content: '✦'; display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%; background: var(--sunshine); color: #5b4b19;
  font-size: 16px; box-shadow: 0 2px 9px rgb(36 92 133 / 7%);
}
.announcement p { margin: 0; }
.site-main { padding: 0; }

/* Editorial article and static-page surfaces share the same hierarchy. */
#post-view, #page-view {
  position: relative; min-height: 330px;
  padding: clamp(25px, 5vw, 56px) clamp(23px, 6vw, 70px) clamp(28px, 4vw, 45px);
  background: var(--paper); border: 1px solid #e9f0f5;
  border-radius: clamp(22px, 4vw, 34px); box-shadow: var(--shadow);
  overflow: visible;
}
#post-view::before, #page-view::before {
  content: ''; position: absolute; left: clamp(23px, 6vw, 70px); top: 0;
  width: 95px; height: 4px; background: linear-gradient(90deg, var(--sky), var(--powder), var(--coral));
  border-radius: 0 0 8px 8px;
}
.article-heading { margin-bottom: 20px; }
/* Allow post headlines to use the full article width. */
.article-heading > div { width: 100%; }
h1 {
  margin: 2px 0 0; color: var(--deep);
  font: 400 clamp(2.1rem, 5.2vw, 3.75rem)/1.12 var(--font-display);
  letter-spacing: -.035em; overflow-wrap: normal;
}
.post-date {
  display: flex; align-items: center; gap: 10px;
  margin: 17px 0 0; color: #55748a;
  font-size: clamp(.94rem, 1.8vw, 1rem); font-weight: 700;
  letter-spacing: .012em; font-style: normal;
}
.post-date:not(:empty)::before { content: ''; width: 19px; height: 3px; background: var(--coral); border-radius: 5px; }

.prose { font-family: var(--font-body); font-size: clamp(1rem, 1.65vw, 1.12rem); line-height: 1.4; }
.prose .daily-article, .prose .page-body { max-width: 68ch; }
.prose p { margin: 0 0 1.25em; }
.prose ul, .prose ol { padding-left: 1.55em; margin: .65em 0 1.3em; }
.prose li { margin: .35em 0; padding-left: .1em; }
.prose li::marker { color: var(--sky); }
.prose strong { color: #24455d; }
.prose h2, .prose h3 { color: var(--deep); font: 400 clamp(1.35rem, 3vw, 1.8rem)/1.25 var(--font-display); margin: 1.5em 0 .55em; letter-spacing: -.012em; }
.prose a { text-decoration: underline; text-decoration-color: #94c5e5; text-decoration-thickness: 1.5px; }
.prose a:hover { text-decoration-color: var(--deep); }
.prose .sources { margin-top: clamp(28px, 4vw, 45px); padding-top: 19px; border-top: 1px solid var(--line); font-size: .91em; }
.prose .sources h2 { color: var(--deep); font: 700 .95rem/1.5 var(--font-body); letter-spacing: .07em; text-transform: uppercase; margin: 0; }
.prose .sources ul { margin: 5px 0 0; }
#page-view h1 { margin: 2px 0 28px; }
#page-view .page-body:empty { min-height: 155px; }

/* Three anchored controls keep the calendar centered at all content boundaries. */
.post-navigation {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(7px, 2vw, 16px); align-items: center;
  margin: clamp(28px, 5vw, 48px) 0 0;
}
.nav-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-width: 0; min-height: 52px; padding: 8px clamp(8px, 2vw, 18px);
  /* Sunshine yellow draws attention without compromising label/date contrast. */
  background: var(--sunshine); color: var(--ink); border: 1px solid #e2bf43;
  border-radius: 16px; text-align: center; text-decoration: none;
  box-shadow: 0 5px 14px rgb(160 120 13 / 18%);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nav-direction { font-size: .9rem; font-weight: 700; line-height: 1.25; }
.nav-date { font-size: .82rem; font-weight: 700; line-height: 1.3; }
.nav-button:hover:not([aria-disabled='true']) {
  background: #f8df73; transform: translateY(-2px);
  box-shadow: 0 8px 17px rgb(160 120 13 / 23%); text-decoration: none;
}
.nav-button[aria-disabled='true'] {
  color: var(--muted); background: #f2f6f9; border-color: var(--line);
  box-shadow: none; cursor: default;
}
.calendar-toggle {
  flex: none; display: flex; flex-direction: column; gap: 1px;
  width: 60px; min-height: 60px; padding: 7px;
  border-radius: 18px;
}
.calendar-toggle svg { width: 24px; height: 24px; }
.calendar-label { font-size: .65rem; font-weight: 700; line-height: 1.1; }

/* Advertisement area only exists visually when advertising is enabled. */
.ad-section { margin: 23px auto 0; padding: 20px 0; width: 100%; }
.ad-slot { text-align: center; min-height: 75px; }

/* Show one small install disclosure only when this browser has a matching path. */
.install-help {
  max-width: 640px; margin: 22px auto 0; padding: 0 16px;
  background: #f1f8fc; border: 1px solid var(--line); border-radius: 16px;
  color: #354e60; font-size: .875rem;
}
.install-help details { width: 100%; }
.install-help summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 44px; padding: 10px 0; color: var(--deep); font-weight: 700;
}
.install-help summary::marker { color: var(--sky); }
.install-help summary:hover { color: #143f5f; }
.install-help .install-device { color: var(--muted); font-weight: 400; font-size: .83em; }
.install-help ol { margin: 0 0 13px; padding-left: 2.1em; line-height: 1.55; }
.install-help li { padding: 2px 0 3px; }
.site-footer { width: 100%; text-align: center; padding: 30px 12px 38px; color: #667b8a; font-size: .84rem; }
.site-footer p { margin: 0; line-height: 1.7; }

/* Native dialog provides focus management and escape-key handling. */
.calendar-dialog {
  width: min(calc(100vw - 28px), 415px); max-height: calc(100dvh - 28px);
  padding: clamp(19px, 4vw, 29px); border: 1px solid #e0eaf2;
  border-radius: 26px; background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 65px rgb(18 46 68 / 24%);
}
.calendar-dialog::backdrop { background: rgb(17 48 68 / 46%); backdrop-filter: blur(3px); }
.calendar-header, .calendar-month-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.calendar-header h2 { margin: 0; color: var(--deep); font: 400 1.75rem/1.2 var(--font-display); letter-spacing: -.012em; }
.close-button { font-size: 1.8rem; box-shadow: none; width: 45px; height: 45px; }
.calendar-month-nav { margin: 20px 0 15px; }
.calendar-month-nav strong { color: #274a64; font-size: 1.04rem; }
.calendar-month-nav button {
  min-width: 43px; min-height: 43px; cursor: pointer; color: var(--deep);
  border: 1px solid var(--line); border-radius: 50%; background: #f5fbff;
  font-size: 1.35rem; transition: background-color .18s ease;
}
.calendar-month-nav button:hover:not(:disabled) { background: #e2f4ff; }
.calendar-month-nav button:disabled { opacity: .3; cursor: not-allowed; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; text-align: center; }
.calendar-grid .day-name { padding: 7px 0; font-size: .78rem; font-weight: 700; color: #617a8c; }
.calendar-grid button, .calendar-grid .pad { display: grid; place-items: center; width: 100%; min-height: 40px; padding: 2px; font-size: .88rem; }
.calendar-grid button { border: 1px solid transparent; background: #eaf6fd; color: #18577d; border-radius: 12px; cursor: pointer; font-weight: 700; }
.calendar-grid button:hover:not(:disabled) { border-color: var(--sky); background: #d5efff; }
.calendar-grid button:disabled { background: transparent; color: #aeb9c0; cursor: not-allowed; font-weight: 400; }
.calendar-grid button[aria-current='date'] { background: var(--deep); color: #fff; }
.calendar-hint { margin: 16px 0 0; font-size: .84rem; color: var(--muted); }
@media (max-width: 480px) {
  .site-header { padding-top: 18px; }
  .brand { width: min(68vw, 260px); }
  #post-view, #page-view { padding: 28px 21px 30px; border-radius: 22px; }
  #post-view::before, #page-view::before { left: 21px; }
  h1 { font-size: clamp(1.9rem, 8vw, 2.65rem); }
  .calendar-toggle { width: 49px; min-height: 49px; padding: 5px; }
  .calendar-toggle svg { width: 20px; height: 20px; }
  .calendar-label { font-size: .6rem; }
  .nav-button { padding-inline: 5px; }
  .nav-direction { font-size: .8rem; }
  .nav-date { font-size: .7rem; }
  .announcement { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (forced-colors: active) {
  #post-view, #page-view, .install-help, .announcement, .icon-button, .calendar-grid button { border: 1px solid CanvasText; }
  .nav-button { border: 2px solid CanvasText; }
}