/* Macourt Review. Dark, flat, hairline borders, soft type. One reading column, built for a phone
   first. Only the calendar is allowed to be wider than that column. */

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0c0c0b;
  --panel: #141413;
  --raise: #1c1c1a;
  --line: #2a2a27;
  --ink: #edeae4;
  --ink-2: #b1ada4;
  --ink-3: #7d7a72;
  --ok: #86c9a2;
  --warn: #e3c26b;
  --wait: #a3b6d1;
  --bad: #e39186;
  --radius: 14px;
  --gap: 16px;
  --tap: 46px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.shell {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--gap) calc(72px + env(safe-area-inset-bottom));
}

/* ---- header */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
}
.top img { height: 11px; width: auto; display: block; opacity: 0.92; }
.top nav { display: flex; gap: 4px; }

.title { margin: 18px 0 2px; font-size: 27px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; }
.subtitle { margin: 0 0 22px; color: var(--ink-2); }
.back { display: inline-flex; align-items: center; min-height: 36px; margin-top: 4px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.back:hover { color: var(--ink); }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }

/* ---- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--raise); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:focus-visible, .row:focus-visible, .cal-day:focus-visible, .field:focus-visible { outline: 2px solid var(--wait); outline-offset: 2px; }
.btn.solid { background: var(--ink); border-color: var(--ink); color: #111110; }
.btn.solid:hover { background: #fff; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #0d1a13; }
.btn.ok:hover { background: #97d6b1; }
.btn.warn { border-color: rgba(227, 194, 107, 0.45); color: var(--warn); }
.btn.quiet { min-height: 38px; padding: 0 12px; border-color: transparent; color: var(--ink-2); font-size: 14px; }
.btn.quiet:hover { color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.wide { flex: 1 1 auto; white-space: nowrap; }

/* ---- status pill */

.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ink-2); }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tone-ok { color: var(--ok); }
.tone-warn { color: var(--warn); }
.tone-wait { color: var(--wait); }
.tone-bad { color: var(--bad); }
.tone-mute { color: var(--ink-3); }

/* ---- summary + view switch */

.summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.summary strong { font-weight: 500; }
.summary .btn { min-height: 40px; padding: 0 14px; flex: none; }

.switch { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 12px; }
.switch button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-weight: 500; font-size: 14px; cursor: pointer; }
.switch button[aria-pressed='true'] { background: var(--raise); color: var(--ink); }

.section { margin-bottom: 30px; }
.section > h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.section > h2 span { color: var(--ink-3); font-weight: 500; }
.empty { padding: 34px 20px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); text-align: center; }
.more { width: 100%; }

/* ---- post card */

.card { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; scroll-margin-top: 12px; }
.card.flash { border-color: var(--ink-3); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; }
.when { font-weight: 500; }
.where { color: var(--ink-2); font-size: 13px; }
.badge { display: inline-block; margin: 0 16px 12px; padding: 3px 9px; border: 1px solid rgba(163, 182, 209, 0.4); border-radius: 999px; color: var(--wait); font-size: 12px; font-weight: 500; }
.badge.warn { border-color: rgba(227, 194, 107, 0.45); color: var(--warn); }
.hint { margin: 0 16px 12px; color: var(--ink-2); font-size: 13px; }
.notice { margin: 0 16px 12px; padding: 10px 12px; border: 1px solid rgba(227, 145, 134, 0.4); border-radius: 10px; color: var(--bad); font-size: 13px; }

.media { position: relative; background: #000; }
.media-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.media-track::-webkit-scrollbar { display: none; }
.media-item { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; min-height: 180px; }
.media-item img, .media-item video { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #000; }
.media.many .media-item { aspect-ratio: 4 / 5; }
.media.many .media-item img, .media.many .media-item video { height: 100%; max-height: none; }
.media-count { position: absolute; top: 10px; right: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); font-size: 12px; font-weight: 500; }
.media-missing { color: var(--ink-3); font-size: 13px; padding: 40px 16px; text-align: center; }

.caption { margin: 0; padding: 14px 16px 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.caption.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.caption-title { padding: 14px 16px 0; font-weight: 600; }
.caption-for { padding: 12px 16px 0; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.readmore { margin: 0 6px; }
.no-caption { padding: 14px 16px 4px; color: var(--ink-3); }

.thread { margin: 12px 16px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.note { margin-bottom: 10px; }
.note-meta { font-size: 12px; color: var(--ink-3); }
.note-meta b { font-weight: 600; color: var(--ink-2); }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.note.resolved .note-body { color: var(--ink-3); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px 16px; }
.actions.tight { gap: 2px; padding: 8px 6px 8px; }
.links { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 16px 14px; font-size: 14px; color: var(--ink-2); }

/* ---- story marker */

.story-ico { display: inline-block; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: url('/img/story.svg') center / contain no-repeat; mask: url('/img/story.svg') center / contain no-repeat; }
.where.story { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--ink); }

/* ---- calendar: a month of thumbnails. On a phone it runs almost edge to edge. */

.cal { margin: 0 -12px 20px; padding: 8px 4px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); scroll-margin-top: 8px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 2px; }
.cal-nav strong { font-weight: 500; }
.cal-nav .btn { min-height: 40px; min-width: 44px; padding: 0 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-dow { padding: 4px 0 6px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-3); }
.cal-day { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 2px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 11px; line-height: 16px; text-align: left; }
button.cal-day { color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cal-day.blank { visibility: hidden; }
.cal-day[aria-pressed='true'] { background: var(--raise); border-color: var(--ink-3); }
.cal-num { align-self: flex-start; min-width: 16px; padding: 0 4px; border-radius: 999px; text-align: center; }
.cal-day.today .cal-num { background: var(--ink); color: #111110; font-weight: 600; }
/* Every day holds the same 3:4 box, so the grid stays even. The pictures are positioned inside
   it and can never stretch it. */
.cal-box { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: 3 / 4; }
.cal-box.many { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); gap: 2px; }

/* One post in the calendar. The strip along the bottom is its status. */
.thumb { position: relative; min-width: 0; min-height: 0; border-radius: 5px; overflow: hidden; background: var(--raise); }
.thumb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; }
.thumb-still, .thumb-text { position: absolute; inset: 0; }
.thumb-still img, .thumb-still canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb-still.video:empty::before { content: ''; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -4px; border: solid transparent; border-width: 6px 0 6px 10px; border-left-color: var(--ink-3); }
.thumb-text { padding: 4px; overflow: hidden; color: var(--ink-2); font-size: 8px; line-height: 1.3; overflow-wrap: anywhere; }
.thumb-story { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, 0.72); color: #fff; }
.thumb-story .story-ico { width: 11px; height: 11px; }
.thumb-flag { position: absolute; top: 2px; left: 2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--warn); color: #1a1505; font-size: 11px; font-weight: 700; line-height: 1; }
.thumb-more { position: absolute; left: 2px; bottom: 5px; padding: 0 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; }

.cal-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 6px 0; color: var(--ink-2); font-size: 12px; }
.cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key b { width: 12px; height: 3px; border-radius: 2px; background: currentColor; }
.cal-key .story-ico { width: 12px; height: 12px; }

.cal-key .thumb-flag { position: static; }
.cal-hint { margin: -8px 0 20px; color: var(--ink-3); font-size: 13px; text-align: center; }

/* The tapped day's posts, in a panel over the calendar: up from the bottom on a phone, centred
   on anything wider. The page behind does not scroll with it. */
.sheet-wrap { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.66); touch-action: none; }
.sheet { width: 100%; max-width: 600px; max-height: 88dvh; padding: 0 16px calc(8px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; touch-action: auto; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--bg); }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -16px 4px; padding: 10px 8px 8px 16px; background: var(--bg); }
.sheet-head h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.sheet-head h2 span { color: var(--ink-3); font-weight: 500; }
@media (min-width: 700px) {
  .sheet-wrap { align-items: center; }
  .sheet { max-height: 86dvh; border-bottom: 1px solid var(--line); border-radius: 18px; }
}

/* Shown beside a lone thumbnail when the day is wide enough (landscape, below). */
.cal-note { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: calc(50% - 2px); overflow: hidden; color: var(--ink-2); font-size: 10px; line-height: 1.35; }
.cal-note b { display: block; color: var(--ink); font-size: 11px; font-weight: 500; white-space: nowrap; }

/* Tablets and up: the month breaks out of the reading column. Its width is capped by the
   height of the screen, so a six-week month still fits without scrolling. */
@media (min-width: 700px) {
  .cal { --w: min(860px, calc(100vw - 48px), max(568px, calc(85vh - 190px))); width: var(--w); margin: 0 0 24px calc((100% - var(--w)) / 2); padding: 12px 10px 14px; }
  .cal-grid { gap: 4px; }
  .cal-day { padding: 4px; font-size: 12px; }
  .cal-box:not(.many) .thumb-story { top: 4px; right: 4px; width: 22px; height: 22px; }
  .cal-box:not(.many) .thumb-story .story-ico { width: 15px; height: 15px; }
  .thumb-text { font-size: 10px; }
  .cal-key { font-size: 13px; }
}

/* Wide and short (a laptop, a tablet on its side): days become wider than tall and hold two
   thumbnails side by side, or one with its time next to it. */
@media (min-width: 1000px) and (orientation: landscape) {
  .cal { --w: min(1040px, calc(100vw - 48px), max(568px, calc((100vh - 310px) * 1.75))); }
  .cal-box, .cal-box.many { aspect-ratio: 3 / 2; grid-template: minmax(0, 1fr) / repeat(2, minmax(0, 1fr)); gap: 4px; }
  .cal-note { display: block; }
}

/* ---- lists (owner) */

.rows { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; text-decoration: none; cursor: pointer; }
.row:first-child { border-top: 0; }
.row:hover { background: var(--raise); }
.row-main { min-width: 0; }
.row-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub .tone-ok, .row-sub .tone-warn, .row-sub .tone-wait { font-weight: 500; }
.row-sub.wrap { white-space: normal; }
.row-sub.tone-bad { color: var(--bad); }
.row-end { flex: none; color: var(--ink-3); font-size: 13px; text-align: right; }
.row.static { cursor: default; }
.row.static:hover { background: transparent; }

.panel { padding: 16px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.panel h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.panel p { margin: 0 0 12px; color: var(--ink-2); }
.panel ol { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); }
.panel .actions { padding: 4px 0 0; }
.linkbox { padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; user-select: all; }
.syncline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -12px 0 14px; color: var(--ink-3); font-size: 13px; }

/* ---- forms */

/* 16px on every control: anything smaller makes iOS zoom the page on focus. */
.field { width: 100%; min-height: var(--tap); padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 16px; }
textarea.field { min-height: 120px; resize: vertical; line-height: 1.5; }
.field::placeholder { color: var(--ink-3); }
label.lbl { display: block; margin: 12px 0 6px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.error { margin: 10px 0 0; color: var(--bad); font-size: 14px; }

.login { display: grid; place-items: center; min-height: 100dvh; padding: var(--gap); }
.login form { width: 100%; max-width: 340px; }
.login img { display: block; height: 13px; margin: 0 auto 34px; }
.login .btn { width: 100%; margin-top: 12px; }

/* ---- dialog + toast */

dialog { width: min(92vw, 440px); margin: 9vh auto auto; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--raise); color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, 0.66); }
dialog h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
dialog p { margin: 0 0 14px; color: var(--ink-2); }
dialog .actions { padding: 14px 0 0; }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: 90vw; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--raise); font-size: 14px; font-weight: 500; z-index: 20; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.toast.show { opacity: 1; }

.loading { padding: 80px 0; text-align: center; color: var(--ink-3); }

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