/* No Nut November, the month itself — /nnn/you/
   On top of /site.css and /nnn/nnn.css. The app's You and Everyone, drawn
   plainly: one column of cards, big buttons for a thumb, and the month as
   thirty tiles. Every colour is the app's. */

.nnn-app main { padding-top: 0.6rem; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: max(1rem, calc(env(safe-area-inset-top) + 0.5rem));
  padding-bottom: 0.6rem;
}

.tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 14px;
  background: var(--block);
}

.tabs button {
  min-height: 40px;
  padding: 0 1rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font: 600 0.9rem var(--sans);
  color: var(--ink2);
  cursor: pointer;
}

.tabs button[aria-pressed="true"] { background: #1D222A; color: var(--ink); font-weight: 700; }

/* ── Pieces ── */

.h { margin: 1.2rem 0 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }

.card {
  margin-top: 0.8rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 18px;
  background: var(--block);
}

.card.quiet { background: transparent; border: 1px dashed #2A3037; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink2);
}

.say { margin-top: 0.4rem; font-size: 1.02rem; line-height: 1.45; color: var(--ink); }
.card .note, .note.center { margin-top: 0.5rem; font-size: 0.82rem; line-height: 1.45; color: var(--ink2); }
.note.center { text-align: center; margin-top: 1.2rem; }

.trouble { margin-top: 0.5rem; font-size: 0.88rem; font-weight: 600; color: #FF7A6B; }

button { font-family: var(--sans); cursor: pointer; }
button:focus-visible, .tile:focus-visible, a:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.primary, .ghost, .danger, .big, .copy, .link {
  min-height: 48px;
  border-radius: 14px;
  font-size: 0.98rem;
  font-weight: 700;
}

.primary { width: 100%; margin-top: 0.9rem; border: 0; background: #F4F2EE; color: var(--paper); }
.ghost { width: 100%; margin-top: 0.7rem; border: 1px solid #2A3037; background: transparent; color: var(--ink); }
.danger { width: 100%; margin-top: 0.7rem; border: 1px solid #2A3037; background: transparent; color: #FF7A6B; }
.link { min-height: 44px; margin-top: 0.3rem; padding: 0; border: 0; background: none; color: var(--ember); font-size: 0.9rem; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.8rem; }
.two .primary, .two .ghost, .two .danger { margin-top: 0; }

.big { min-height: 56px; border: 0; background: #1D222A; color: var(--ink); }
.big.on { background: rgba(116, 179, 166, 0.2); color: #9FD8CB; }
.big.yes { background: #D2B46E; color: #1A1408; }

.code-in {
  width: 100%;
  margin-top: 0.7rem;
  padding: 0 1rem;
  min-height: 56px;
  border: 1px solid #2A3037;
  border-radius: 14px;
  background: var(--paper);
  font: 800 1.35rem ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
}

/* ── Picking a mode ── */

.picks { display: grid; gap: 0.6rem; margin-top: 1rem; }

.pick.mode {
  --c: var(--ember);
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  gap: 0.9rem;
  align-items: start;
  width: 100%;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  border-radius: 18px;
  background: var(--block);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, transparent), var(--block) 62%);
  text-align: left;
  color: inherit;
}

.pick.mode.on { border: 2px solid var(--c); box-shadow: 0 0 28px color-mix(in srgb, var(--c) 28%, transparent); }

.pick .emblem, .head .emblem, .mode-row .emblem {
  width: 2.8rem; height: 2.8rem; color: var(--c);
  fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
}

.pick .words { display: flex; flex-direction: column; gap: 0.15rem; }
.pick .diff { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.pick .name { font-size: 1.12rem; font-weight: 800; color: var(--ink); }
.pick .line { font-size: 0.92rem; color: var(--ink2); }
.pick .rules { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem 0.28rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.78rem;
  color: var(--ink);
}

.chip svg { width: 0.95rem; height: 0.95rem; flex: none; fill: none; stroke: var(--c, var(--ember)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; }
.chip.pick { min-height: 44px; padding: 0 0.9rem 0 0.7rem; border: 1px solid #2A3037; font-size: 0.88rem; }
.chip.pick.on { border-color: #FF7A6B; background: rgba(255, 122, 107, 0.12); }

/* The tick that is never ticked for anybody. */
.tick {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  width: 100%;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
}

.tick .box {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 0.1rem;
  border: 1.6px solid var(--ink3);
  border-radius: 7px;
}

.tick.on .box { border-color: #D2B46E; background: #D2B46E; box-shadow: inset 0 0 0 4px #D2B46E, inset 0 0 0 8px #1A1408; }
.tick .words { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; line-height: 1.4; color: var(--ink2); }
.tick b { font-size: 0.98rem; color: var(--ink); }

/* ── You ── */

.head-row { display: flex; align-items: center; gap: 0.7rem; }
.head .mode-name { font-size: 1rem; font-weight: 700; color: var(--ink); }
.medal { margin-top: 0.6rem; font-size: 2.2rem; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; }
.medal.undefeated { color: #EEECE7; }
.medal.gold { color: #D2B46E; }
.medal.silver { color: #A3ACB7; }
.medal.bronze { color: #B07F58; }
.head .sub { margin-top: 0.2rem; font-size: 0.92rem; color: var(--ink2); }

.banner { display: flex; flex-direction: column; gap: 0.25rem; border: 1px solid #2A3037; font-size: 0.88rem; color: var(--ink2); }
.banner b { color: var(--ink); font-size: 1rem; }

.strip {
  display: flex; flex-direction: column; gap: 0.2rem;
  border: 1px solid rgba(255, 122, 107, 0.35);
  background: rgba(255, 122, 107, 0.07);
  font-size: 0.86rem; color: #FF9C90;
}
.strip b { color: var(--ink); font-size: 1rem; }

.ask .item + .item { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

/* The month: thirty tiles, a week to a row. */
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.8rem; }

.tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  background: #171B21;
  font: 700 0.92rem var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink3);
}

.tile.won { background: #D2B46E; color: #1A1408; }
.tile.lost { background: #4A505A; color: var(--ink); text-decoration: line-through; text-decoration-thickness: 2px; }
.tile.grey { background: #2A3037; color: var(--ink2); }
.tile.waiting { background: transparent; box-shadow: inset 0 0 0 2px var(--ember); color: var(--ink); }
.tile.today { background: transparent; box-shadow: inset 0 0 0 2px #F4F2EE; color: var(--ink); }
.tile.today.still { box-shadow: inset 0 0 0 2px #74B3A6; color: #9FD8CB; }
.tile.lost.today { box-shadow: inset 0 0 0 2px #F4F2EE; }
.tile.edge { box-shadow: inset 0 0 0 2px rgba(255, 122, 107, 0.85); }
button.tile { cursor: pointer; }

.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.8rem; }
.levels .lv { opacity: 0.45; }
.levels .lv.you { opacity: 1; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px currentColor; }

.better .perks { margin: 0.6rem 0 0; padding-left: 1.1rem; color: var(--ink); line-height: 1.6; }
.better .badge { margin-top: 1rem; }
.move { margin-top: 0.9rem; }
.steps-list { margin: 0.4rem 0 0; padding-left: 1.2rem; color: var(--ink); line-height: 1.6; }

.code {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.2rem 0.8rem;
  margin-top: 0.8rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(232, 135, 90, 0.4);
  border-radius: 14px;
  background: rgba(232, 135, 90, 0.08);
}
.code .eyebrow { grid-column: 1; color: var(--ember); }
.code .code-text { grid-column: 1; font: 800 1.4rem ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.04em; color: var(--ink); user-select: all; }
.code .copy { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; padding: 0 1.1rem; border: 0; border-radius: 999px; background: var(--ember); color: var(--paper); }
.code .note { grid-column: 1 / -1; }

/* ── Everyone ── */

.hero { text-align: center; padding-block: 1.4rem; }
.big-number { margin-top: 0.3rem; font-size: 3.2rem; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tier { display: flex; justify-content: space-between; padding: 0.7rem 0; border-top: 1px solid var(--rule); font-size: 0.98rem; color: var(--ink); }
.tier:first-child { border-top: 0; }
.tier.gold b { color: #D2B46E; }
.tier.silver b { color: #A3ACB7; }
.tier.bronze b { color: #B07F58; }
.tier.silent b { color: var(--ink2); }
.mode-row { --c: var(--ember); display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 0.7rem; padding: 0.6rem 0; border-top: 1px solid var(--rule); color: var(--ink); }
.mode-row .emblem { width: 2rem; height: 2rem; }
.mode-row b { font-variant-numeric: tabular-nums; }
.nnn-app .post { margin-top: 0.8rem; grid-template-columns: auto 1fr; }

/* ── From the app, read-only ── */

.sides .side-row { --c: var(--ember); margin-top: 0.8rem; }
.sides .name { display: block; font-size: 0.92rem; font-weight: 700; color: var(--c); }
.sides .bar { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; margin-top: 0.35rem; }
.sides .bar i { height: 8px; border-radius: 2px; background: #1A1F26; }
.sides .bar i.done { background: var(--c); }
.sides .bar i.missed { background: #4A505A; }
.sides .bar i.open { box-shadow: inset 0 0 0 1.5px var(--c); background: transparent; }
.sides .bar i.before, .sides .bar i.rest { background: transparent; box-shadow: inset 0 0 0 1px #262C34; }

/* ── Today and Stats for nerds ── */

h1.h { font-size: 1.8rem; }
.fell { margin-top: 0.3rem; font-size: 0.95rem; font-weight: 700; color: var(--ember); }
.facts-card .say + .say { margin-top: 0.6rem; }
.go-row { display: flex; justify-content: center; margin-top: 0.4rem; }

.stats-table { overflow-x: auto; }
.srow {
  --c: var(--ink2);
  display: grid;
  grid-template-columns: minmax(6.5rem, 1.6fr) repeat(6, minmax(2.6rem, 1fr));
  gap: 0.3rem;
  min-width: 26rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.srow span:not(.mname) { text-align: right; }
.srow.shead { border-top: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.srow .mname, .srow2 .mname { font-weight: 700; color: var(--c); }

.srow2 { --c: var(--ink2); display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.8rem; padding: 0.6rem 0; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--ink2); }
.srow2 b { grid-column: 1 / -1; font-weight: 600; color: var(--ink); }
.srow2 b:empty { display: none; }

/* ── More looks ── */

.look-chips { margin-top: 0.9rem; }
.canvas-frame { margin-top: 1rem; display: flex; justify-content: center; }
.card-canvas {
  display: block;
  width: min(100%, 360px);
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.caption {
  margin: 0.7rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: var(--paper);
  font: 0.92rem/1.55 var(--sans);
  color: var(--ink);
  white-space: pre-wrap;
}
.share-link { display: inline-block; margin-left: 1rem; text-decoration: none; }
.look-chips .chip.pick.on { border-color: var(--ember); background: rgba(232, 135, 90, 0.14); }