/* ============================================================
   matservice.css — shared design system
   Flexoki light · no dark mode · all apps
   v2: mobile viewport fixes, no-zoom inputs, layout polish
   ============================================================ */

/* ── FLEXOKI TOKENS ── */
:root {
  /* Base */
  --paper:  #FFFCF0;
  --bg2:    #F2F0E5;
  --ui:     #E6E4D9;
  --ui2:    #DAD8CE;
  --ui3:    #CECDC3;
  --tx3:    #B7B5AC;
  --tx2:    #6F6E69;
  --tx:     #100F0F;

  /* Accents */
  --red:    #AF3029;
  --orange: #BC5215;
  --yellow: #AD8301;
  --green:  #66800B;
  --cyan:   #24837B;
  --blue:   #205EA6;
  --purple: #5E409D;
  --mag:    #A02F6F;

  /* Accent backgrounds (tinted) */
  --red-bg:    #FFE1D5;
  --orange-bg: #FFE7CE;
  --yellow-bg: #FAEEC6;
  --green-bg:  #EDEECF;
  --cyan-bg:   #DDF1E4;
  --blue-bg:   #E1ECEB;

  /* Semantic aliases used across apps */
  --bg:       var(--paper);
  --border:   var(--ui);
  --muted:    var(--tx2);
  --accent:   var(--cyan);
  --danger:   var(--red);
  --ok:       var(--green);
  --warn:     var(--orange);

  /* Typography */
  --serif: 'Instrument Serif', Georgia, serif;
  --mono:  'DM Mono', ui-monospace, monospace;
  --sans:  'Atkinson Hyperlegible', system-ui, sans-serif;

  /* Layout */
  --rad:    10px;
  --pad:    clamp(16px, 3vw, 32px);
  --gap:    clamp(10px, 1.4vw, 16px);
  --nav-h:  60px;
  /* Single consistent column width across all apps.
     On mobile the column fills the viewport; --pad provides breathing room. */
  --app-w:  720px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* 16px base — this is what prevents iOS auto-zoom on inputs.
     Inputs must be ≥16px (1rem) to avoid zoom. Never go below. */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* Smooth scroll for all anchor jumps */
  scroll-behavior: smooth;
}

html, body { height: 100%; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Safe area insets for iPhones with notch/home bar */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── LAYOUT SHELL ── */
.ms-wrap {
  max-width: var(--app-w);
  margin: 0 auto;
  min-height: 100dvh;
  padding: var(--pad) var(--pad) calc(var(--nav-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  border-left: 1px solid var(--ui);
  border-right: 1px solid var(--ui);
}

/* Kept for backward compat but now same as --app-w */
.ms-wrap--narrow {
  max-width: var(--app-w);
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
h3 { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom: 0.5rem; }

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.label {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--tx2);
  letter-spacing: 0.07em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
a:hover { text-decoration-style: solid; color: var(--cyan); }

/* ── SHARED HEADER ── */
.ms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--gap);
  border-bottom: 1px solid var(--ui);
  gap: 10px;
  flex-wrap: wrap;
}

/* Wordmark — used as the site identity on every page.
   It now links to /credits (the about+credits page).
   Styled to look like a brand mark, not a standard link. */
.ms-wordmark {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--tx);
  text-decoration: none;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.ms-wordmark em { font-style: italic; color: var(--tx2); }
.ms-wordmark:hover { color: var(--tx); text-decoration: none; }
.ms-wordmark:hover em { color: var(--cyan); }

.ms-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── LOCATION PILL ── */
.ms-location {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--tx2);
  background: none;
  border: 1px solid var(--ui3);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.ms-location:hover { border-color: var(--tx2); color: var(--tx); }

/* ── BUTTONS ── */
button, .btn {
  font-family: var(--sans);
  cursor: pointer;
  border: 1px solid var(--ui);
  background: transparent;
  color: var(--tx);
  border-radius: var(--rad);
  padding: 8px 12px;
  /* 1rem minimum so button text matches input floors */
  font-size: 0.875rem;
  transition: background 0.15s, border-color 0.15s;
  /* Stop iOS from adding its own button styles */
  -webkit-appearance: none;
  appearance: none;
}
button:hover, .btn:hover { background: var(--bg2); }

.btn-primary {
  background: var(--tx);
  color: var(--paper);
  border-color: var(--tx);
  font-weight: 700;
}
.btn-primary:hover { opacity: 0.85; background: var(--tx); }

.pill { border-radius: 999px; }

/* ── INPUTS — anti-zoom rules ──
   iOS Safari zooms the page when an input's font-size is below 16px.
   All text inputs must be font-size: 1rem (16px) or larger.
   This rule covers every input in the app globally. */
input[type="text"],
input[type="search"],
input[type="email"],
input:not([type]),
textarea,
select {
  font-size: 1rem; /* 16px — the iOS zoom threshold */
  font-family: var(--mono);
  border: 1px solid var(--ui);
  background: var(--bg2);
  color: var(--tx);
  padding: 10px 14px;
  border-radius: var(--rad);
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
  /* Kill iOS input chrome */
  -webkit-appearance: none;
  appearance: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--tx2); }
input::placeholder, textarea::placeholder { color: var(--tx3); }

/* Legacy class — keep for backward compat */
.ms-search {
  font-family: var(--mono);
  font-size: 1rem;
  border: 1px solid var(--ui);
  background: var(--bg2);
  color: var(--tx);
  padding: 7px 12px;
  border-radius: var(--rad);
  outline: none;
  transition: border-color 0.15s;
}
.ms-search::placeholder { color: var(--tx3); }
.ms-search:focus { border-color: var(--tx2); }

/* ── INTERNAL TABS (within a page) ── */
.ms-tabs {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--ui);
  padding-bottom: 6px;
  margin-bottom: var(--gap);
  overflow-x: auto;
  scrollbar-width: none;
  /* Prevent iOS momentum scroll from clipping */
  -webkit-overflow-scrolling: touch;
}
.ms-tabs::-webkit-scrollbar { display: none; }

.ms-tab {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 2px 8px;
  color: var(--tx3);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 0.15s;
  white-space: nowrap;
}
.ms-tab:hover { color: var(--tx); background: none; }
.ms-tab.active { color: var(--tx); border-bottom-color: var(--tx); }

/* ── CARDS ── */
.ms-card {
  border: 1px solid var(--ui);
  border-radius: var(--rad);
  background: var(--paper);
  padding: 1rem;
}

.ms-card--muted  { background: var(--bg2); }
.ms-card--inset  { background: var(--bg2); border-color: var(--ui2); }

/* ── STAT BLOCK ── */
.ms-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.ms-stat {
  background: var(--bg2);
  border: 1px solid var(--ui);
  border-radius: var(--rad);
  padding: 0.85rem 1rem;
}

.ms-stat-label {
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--tx3);
  letter-spacing: 0.07em;
  margin-bottom: 0.2rem;
}

.ms-stat-value {
  font-family: var(--serif);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--tx);
}

.ms-stat-sub {
  font-size: 0.72rem;
  color: var(--tx2);
  margin-top: 0.2rem;
  line-height: 1.3;
}

/* ── CONDITION CHIPS ── */
.ms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ms-chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--ui);
  color: var(--tx2);
  background: var(--paper);
}

.ms-chip.good    { background: var(--green-bg);  border-color: #CDD597; color: var(--green); }
.ms-chip.caution { background: var(--yellow-bg); border-color: #ECCB60; color: var(--yellow); }
.ms-chip.bad     { background: var(--red-bg);    border-color: #F89A8A; color: var(--red); }
.ms-chip.info    { background: var(--blue-bg);   border-color: #92BFDB; color: var(--blue); }

/* ── COLOUR SEMANTICS (shared across apps) ── */
.ok    { color: var(--green); }
.warn  { color: var(--orange); }
.hi    { color: var(--red); }
.dim   { color: var(--tx2); }
.muted { color: var(--tx3); }

/* ── PANELS (TXT-style sections) ── */
.ms-panel {
  padding: var(--gap) 0;
  border-bottom: 1px solid var(--ui);
}
.ms-panel:last-child { border-bottom: none; }

/* ── WEEK / DAY GRID ── */
.ms-week-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 720px) { .ms-week-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ms-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ms-week-mini {
  border: 1px solid var(--ui);
  border-radius: var(--rad);
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ms-week-mini:hover  { border-color: var(--ui3); background: var(--bg2); }
.ms-week-mini.active { background: var(--bg2); border-color: var(--ui3); }

/* ── HOURLY GRID ── */
.ms-today-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
@media (min-width: 1200px) { .ms-today-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 640px)  { .ms-today-grid { grid-template-columns: repeat(2, 1fr); } }

.ms-hour-card {
  border: 1px solid var(--ui);
  border-radius: var(--rad);
  padding: 10px;
  background: var(--bg2);
  display: grid;
  gap: 6px;
  text-align: center;
}
.ms-hour-card.is-now { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ms-hour-card.is-past:not(.is-now) { opacity: 0.4; }
@media (max-width: 800px) { .ms-hour-card.is-past:not(.is-now) { display: none; } }

/* ── WEAR CARDS ── */
.ms-wear-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) { .ms-wear-grid { grid-template-columns: 1fr; } }

.ms-wear-grid--6 {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1024px) { .ms-wear-grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .ms-wear-grid--6 { grid-template-columns: repeat(2, 1fr); } }

.ms-wear-card {
  border: 1px solid var(--ui);
  border-radius: var(--rad);
  padding: 12px;
  background: var(--bg2);
  text-align: center;
  min-width: 0;
}

/* ── OVERLAY / MODAL ── */
.ms-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 15, 15, 0.4);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}
.ms-overlay.open { display: flex; }

.ms-modal {
  background: var(--paper);
  border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--ui);
  padding: 1.5rem var(--pad) calc(2.5rem + env(safe-area-inset-bottom));
  width: 100%;
  max-width: var(--app-w);
}

.ms-modal h2 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 0.4rem; }
.ms-modal p  { font-size: 0.85rem; color: var(--tx2); line-height: 1.55; margin-bottom: 1rem; }

/* Search modal (location) */
.ms-search-modal input {
  width: 100%;
  /* 1rem = 16px — required to stop iOS zoom on focus */
  font-size: 1rem;
  font-family: var(--mono);
  border: 1px solid var(--ui);
  background: var(--bg2);
  color: var(--tx);
  padding: 12px 14px;
  border-radius: var(--rad);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ms-search-modal input:focus { border-color: var(--tx2); }
.ms-search-modal .ms-hint { font-size: 0.75rem; color: var(--tx3); margin-top: 8px; }

/* ── BOTTOM NAV ── */
/* The nav bar itself spans the full viewport width (background, border).
   An inner wrapper constrains the items to --app-w, centred. */
.ms-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper);
  border-top: 1px solid var(--ui);
  z-index: 100;
  isolation: isolate;
  /* Use flex to centre the inner row */
  display: flex;
  justify-content: center;
}

/* Inner row — constrained to app width, flex for items */
.ms-nav-inner {
  width: 100%;
  max-width: var(--app-w);
  display: flex;
  align-items: stretch;
  position: relative; /* pill is absolute within this */
}

.ms-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--tx3);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px 4px;
  transition: color 0.15s;
  z-index: 1;
  position: relative;
}
.ms-nav-item:hover  { color: var(--tx2); text-decoration: none; }
.ms-nav-item.active { color: var(--tx); }

.ms-nav-icon { font-size: 1.15rem; line-height: 1; }

/* Animated pill — absolute inside .ms-nav-inner */
.ms-nav-pill {
  position: absolute;
  top: 6px;
  height: calc(var(--nav-h) - 12px);
  background: var(--bg2);
  border: 1px solid var(--ui2);
  border-radius: 999px;
  pointer-events: none;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

/* ── ALERTS ── */
.ms-alert {
  border: 1px solid var(--red);
  color: var(--red);
  background: var(--red-bg);
  border-radius: var(--rad);
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  display: none;
}
.ms-alert.show { display: block; }

/* ── HERO (Now screen) ── */
.ms-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(80vh - var(--nav-h) - 80px);
  text-align: center;
}
@media (max-width: 640px) { .ms-hero { min-height: calc(75vh - var(--nav-h) - 120px); } }

.ms-hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}
.ms-hero > *:not(canvas) { position: relative; z-index: 1; }

.ms-bigtemp {
  font-family: var(--serif);
  font-size: min(22vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--tx);
}

.ms-sass {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--orange);
  margin-bottom: 0.5rem;
}

.ms-summary {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0.5rem;
  color: var(--tx);
}

.ms-feels {
  font-size: 0.85rem;
  color: var(--tx2);
  margin-top: 0.25rem;
}

/* ── NERD GRID ── */
.ms-nerd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) { .ms-nerd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ms-nerd-grid { grid-template-columns: 1fr; } }

.ms-nerd-box {
  border: 1px solid var(--ui);
  border-radius: var(--rad);
  padding: 10px;
  background: var(--bg2);
  font-family: var(--mono);
}
.ms-nerd-k { font-size: 0.65rem; color: var(--tx3); margin-bottom: 4px; }
.ms-nerd-v { font-size: 0.85rem; font-weight: 500; color: var(--tx); }

/* ── TXT-SPECIFIC ── */
.ms-now-line {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

.ms-next-line {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  line-height: 1.5;
  color: var(--tx2);
  max-width: 55ch;
}

.ms-list-line {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  line-height: 1.5;
  max-width: 60ch;
}

.ms-snark {
  font-family: var(--serif);
  font-style: italic;
}

.ms-place {
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.ms-place:hover { text-decoration-style: solid; }

/* ── FOOTER (small attribution line) ── */
.ms-footer {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--tx3);
  text-align: center;
  padding: 6px 0;
}
.ms-footer a { color: var(--tx3); }
.ms-footer a:hover { color: var(--cyan); text-decoration-style: solid; }

/* ── ANIMATIONS ── */
@keyframes ms-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ms-fade { animation: ms-fade-up 0.25s ease both; }

@keyframes ms-spin { to { transform: rotate(360deg); } }
.ms-spinning { animation: ms-spin 0.7s linear; }
@media (prefers-reduced-motion: reduce) { .ms-spinning { animation: none; } }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ui3); border-radius: 999px; }

/* ── UTILITY ── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }

/* ── CREDITS PAGE ── */
.credits-wrap {
  max-width: var(--app-w);
  margin: 0 auto;
  padding: var(--pad) var(--pad) calc(var(--nav-h) + 24px);
  border-left: 1px solid var(--ui);
  border-right: 1px solid var(--ui);
  min-height: 100dvh;
}

.credit-section-title {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--tx3);
  text-transform: uppercase;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ui);
}
.credit-section-title:first-of-type { margin-top: 0; }

.credit-item {
  border-bottom: 1px solid var(--ui);
  padding: 1rem 0;
}
.credit-item:last-child { border-bottom: none; }

.credit-name {
  font-weight: 700;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.credit-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--tx2);
  margin-bottom: 0.4rem;
}

.credit-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--tx2);
}

/* Release log */
.release-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ui);
}
.release-item:last-child { border-bottom: none; }

.release-ver {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--tx3);
  padding-top: 0.15rem;
  white-space: nowrap;
}

.release-body {}

.release-date {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--tx3);
  margin-bottom: 0.2rem;
}

.release-note {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--tx2);
}