/* Chrysalis terminal: palette and framed panels follow lidoll.dev, with local fonts for offline use. */
:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  color: #fff0f4;
  background: #1a0611;
  --page: #1a0611;
  --panel: #370f2d;
  --panel-deep: #260b20;
  --ink: #fff0f4;
  --muted: #cca9bd;
  --pink: #ff96c8;
  --orchid: #a474d6;
  --rail: #fadadd;
  --gold: #ffe66f;
  --border: #72415f;
  --chart-grid: #5f344e;
  --chart-pee: #ff96c8;
  --chart-hold: #9468be;
  --chart-liquid: #b3a4f4;
  --mono: Consolas, "Liberation Mono", "Courier New", monospace;
  --display: "Arial Black", "Segoe UI Black", Impact, sans-serif;
  --frame:
    inset 0 0 0 1px #d89aab, inset 0 0 0 2px #fadadd, inset 0 0 0 3px #fff0f4,
    inset 0 0 0 4px #d89aab;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
button,
input,
select {
  min-height: 44px;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
[hidden] {
  display: none !important;
}
::selection {
  color: var(--page);
  background: var(--pink);
}
.svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  left: 12px;
  top: -100px;
  z-index: 30;
  padding: 12px;
  background: var(--gold);
  color: var(--page);
}
.skip-link:focus {
  top: 12px;
}
/* Optional static scanlines stay behind content; no flashing or animated jitter. */
.app-shell {
  max-width: 1720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
}
main {
  position: relative;
  min-width: 0;
  padding: 0 42px;
  background:
    radial-gradient(ellipse at 100% 0, #6b25412e, transparent 45%),
    linear-gradient(#fadadd05 1px, transparent 1px),
    linear-gradient(90deg, #fadadd05 1px, transparent 1px);
  background-size:
    auto,
    32px 32px,
    32px 32px;
}
main > * {
  position: relative;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 38px 22px 25px;
  background:
    linear-gradient(160deg, #ff96c80b, transparent 40%),
    repeating-linear-gradient(135deg, transparent 0 12px, #fadadd04 12px 13px),
    #2a0a20;
  border-right: 1px solid #fadadd;
  box-shadow:
    inset -4px 0 #d89aab,
    inset -5px 0 #fff0f4,
    5px 0 #ff96c810;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand > span {
  font: 900 19px/0.95 var(--display);
  letter-spacing: -0.8px;
}
.brand-sigil {
  width: 35px;
  height: 42px;
  color: var(--pink);
  flex-shrink: 0;
}
.brand-sub {
  display: block;
  margin-top: 8px;
  font: 8px/1.5 var(--mono);
  letter-spacing: 1px;
  color: var(--muted);
}
.sidebar-code {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  font: 9px var(--mono);
  color: var(--pink);
  letter-spacing: 1px;
}
.nav-label {
  margin: 46px 0 16px 12px;
  font: 9px var(--mono);
  letter-spacing: 1.4px;
  color: var(--muted);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 12px;
}
.nav-item small {
  margin-left: auto;
  font: 9px var(--mono);
  opacity: 0.7;
}
.nav-item.active {
  color: var(--pink);
  border-color: #b97497;
  background: #ff96c811;
  box-shadow: inset 3px 0 var(--pink);
}
.nav-item:hover {
  background: #ff96c81a;
  color: var(--ink);
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 45px;
}
.privacy-note {
  padding: 16px 13px;
  border: 1px solid var(--border);
  border-top: 2px solid #b97497;
  background: #1a061155;
}
.privacy-note .icon {
  display: block;
  color: var(--pink);
  margin-bottom: 12px;
  width: 17px;
}
.privacy-note strong {
  font: 10px var(--mono);
  letter-spacing: 1.1px;
  color: var(--rail);
}
.privacy-note p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
  margin: 9px 0 0;
}
.site-link {
  display: flex;
  justify-content: space-between;
  color: var(--pink);
  font: 9px var(--mono);
  letter-spacing: 0.7px;
  margin: 23px 0 0;
}
.site-link:hover {
  color: var(--rail);
}
.topbar {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.breadcrumb {
  font: 9px/1.7 var(--mono);
  letter-spacing: 1.1px;
  color: var(--rail);
}
.breadcrumb > span {
  margin: 0 9px;
  color: var(--pink);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sync-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* Keeps the real save status beside the sign-in action on narrow screens. */
}
.local-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 10px/1.5 var(--mono);
  color: var(--muted);
  max-width: 225px;
}
.local-badge > span {
  width: 5px;
  height: 5px;
  background: var(--pink);
  flex-shrink: 0;
}
.archive-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 29px;
  padding: 9px 12px;
  color: var(--pink);
  border: 1px solid #77425b;
  background: #ff96c80a;
  font: 9px/1.6 var(--mono);
  letter-spacing: 1.6px;
}
.archive-strip span:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}
.archive-strip i {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--pink);
  transform: rotate(45deg);
}
.archive-strip span:last-child {
  color: var(--muted);
  font-size: 8px;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 38px 0 30px;
}
.dossier-heading {
  margin: 27px 0 31px;
  min-height: 162px;
}
.eyebrow {
  margin: 0 0 14px;
  font: 10px/1.6 var(--mono);
  letter-spacing: 1.8px;
  color: var(--pink);
}
h1 {
  margin: 0;
  font: italic 900 clamp(30px, 3.6vw, 52px)/1.05 var(--display);
  font-synthesis: style; /* Keeps the site's slanted title when the local display font has no italic face. */
  letter-spacing: -2.2px;
  color: var(--ink);
}
.dossier-heading h1 {
  font-size: clamp(42px, 5.4vw, 78px);
  letter-spacing: -4px;
  text-shadow: 2px 1px #ff96c84d;
}
h1 > span {
  color: var(--pink);
}
.subtitle {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin: 14px 0 0;
}
.dossier-date {
  color: var(--pink);
  font: 9px/1.6 var(--mono);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin: 18px 0 0;
}
.dossier-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 158px;
  flex-shrink: 0;
  color: #d89aab;
  opacity: 0.8;
  transform: rotate(7deg);
}
.dossier-seal > span {
  font: 7px/1.5 var(--mono);
  letter-spacing: 1.6px;
}
.dossier-seal > svg {
  width: 100px;
  height: 100px;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.7;
}
.dossier-seal > strong {
  font: 900 12px var(--display);
  letter-spacing: 2px;
}
.redacted {
  color: transparent;
  background-color: #b784a0;
  user-select: none;
}
/* Pale double rules, compact labels, and tabular numbers echo the game's research interface. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 25px;
  counter-reset: stat;
}
.stat-card {
  position: relative;
  padding: 18px 19px 17px;
  border: 1px solid var(--border);
  background:
    linear-gradient(110deg, #ff96c808, transparent), var(--panel-deep);
  counter-increment: stat;
}
.stat-card::before {
  content: "0" counter(stat);
  position: absolute;
  right: 10px;
  bottom: 9px;
  color: #ff96c866;
  font: 9px var(--mono);
}
.stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  font: 10px/1.5 var(--mono);
  color: var(--muted);
}
.stat-icon {
  color: var(--pink);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
.stat-icon .icon {
  width: 17px;
  height: 17px;
}
.stat-value {
  font: 38px/1.1 var(--mono);
  color: var(--rail);
  margin: 10px 0 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
}
.stat-value small {
  font-size: 12px;
  color: var(--pink);
  letter-spacing: 0;
}
.stat-foot {
  display: block;
  padding-right: 12px;
  font: 10px/1.6 var(--mono);
  color: var(--muted);
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.06fr);
  align-items: start;
  gap: 25px;
}
.card {
  min-width: 0;
  padding: 25px;
  background:
    linear-gradient(145deg, #ff96c805, transparent 40%), var(--panel-deep);
  border: 1px solid var(--border);
}
.log-card {
  border: 0;
  box-shadow:
    var(--frame),
    6px 6px 0 #ff96c80c;
  padding: 27px;
}
.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
}
.card-heading p {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 7px 0 0;
}
.pill {
  white-space: nowrap;
  font: 8px var(--mono);
  letter-spacing: 1px;
  border: 1px solid #a16b8a;
  padding: 7px 8px;
  color: var(--pink);
  background: #ff96c80b;
}
label,
legend {
  display: block;
  margin-bottom: 9px;
  font: 11px/1.5 var(--mono);
  color: var(--rail);
}
input:not([type="radio"]):not([type="range"]),
select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 11px 12px;
  background: #1c0717;
  color: var(--ink);
  font-size: 13px;
  color-scheme: dark;
}
input[type="datetime-local"] {
  margin-bottom: 20px;
}
input:hover,
select:hover {
  border-color: #bc819f;
}
input[type="number"] {
  font-variant-numeric: tabular-nums;
}
.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}
.unit {
  float: right;
  color: var(--pink);
  font-size: 10px;
}
.field-help {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 7px;
}
.position-field {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}
.segmented {
  display: flex;
  background: #1c0717;
  border: 1px solid var(--border);
  padding: 3px;
  gap: 3px;
}
.position-options label {
  position: relative;
  margin: 0;
  flex: 1;
  cursor: pointer;
}
.position-options input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
}
.position-options span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  font: 11px var(--mono);
  color: var(--muted);
  padding: 9px 3px;
}
.position-options input:checked + span {
  background: #63304f;
  color: var(--ink);
  box-shadow: inset 0 -2px var(--pink);
}
.position-options input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.wetting-row {
  align-items: end;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 16px;
  border-radius: 0;
  font: 600 11px/1.5 var(--mono);
  border: 1px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.primary {
  background: var(--pink);
  color: var(--page);
  border-color: var(--pink);
}
.primary:hover {
  background: var(--rail);
  border-color: var(--rail);
}
.secondary {
  background: #ff96c808;
  border-color: #a16b8a;
  color: var(--rail);
}
.secondary:hover {
  background: #ff96c81a;
  border-color: var(--pink);
}
.small {
  font-size: 9px;
  padding: 7px 10px;
  min-height: 36px;
  white-space: nowrap;
}
.new-diaper {
  padding: 11px 8px;
}
.probability-box {
  border: 1px solid #905375;
  background: #370f2d;
  padding: 15px;
}
.probability-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.probability-heading > label {
  margin: 0;
}
.probability-number {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 13px var(--mono);
  color: var(--pink);
}
.probability-number input {
  width: 65px !important;
  padding: 6px 5px 6px 9px !important;
  min-height: 38px;
  color: var(--pink) !important;
  font: 16px var(--mono) !important;
}
.prompt-note {
  font-size: 11px;
  line-height: 1.75;
  color: var(--muted);
  margin: 14px 1px 18px;
}
.roll-button {
  width: 100%;
  min-height: 49px;
  font-size: 12px;
  box-shadow: 3px 3px 0 #ff96c82b;
}
.roll-button > span {
  margin-left: auto;
  font-size: 18px;
}
.roll-button .icon {
  margin-right: auto;
}
.manual-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
}
.manual-row select {
  width: 84px;
  font-size: 12px;
  padding: 7px;
  min-height: 40px;
}
.text-button {
  color: var(--pink);
  border: 0;
  background: none;
  padding: 8px;
  font: 11px/1.5 var(--mono);
}
.text-button:hover,
.text-link:hover {
  text-decoration: underline;
}
.result-message {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid var(--pink);
  border-left-width: 3px;
  background: #ff96c813;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
}
.left-column,
.right-column {
  display: grid;
  gap: 22px;
}
.chart-card {
  border-top: 2px solid #b780a0;
}
.chart-card .card-heading {
  margin-bottom: 18px;
}
.compact-select {
  width: auto;
  padding: 7px 9px;
  min-height: 36px;
  font: 11px var(--mono);
}
.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chart-tabs button {
  border: 0;
  background: none;
  min-height: 34px;
  padding: 6px 12px;
  font: 10px var(--mono);
  color: var(--muted);
}
.chart-tabs button.active {
  background: #63304f;
  color: var(--ink);
}
.chart-legend {
  display: flex;
  gap: 12px;
  font: 9px var(--mono);
  color: var(--muted);
}
.chart-legend > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.chart-legend i {
  width: 7px;
  height: 7px;
  display: inline-block;
}
.legend-pee {
  background: var(--chart-pee);
}
.legend-hold {
  background: var(--chart-hold);
}
.chart {
  margin-top: 20px;
  min-height: 174px;
}
.chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.chart text {
  font-family: var(--mono);
  fill: var(--muted);
  font-size: 10px;
}
.chart-caption {
  font: 10px/1.7 var(--mono);
  color: var(--muted);
  text-align: center;
  margin: 10px 0 0;
}
.chart-details {
  margin-top: 12px;
  font: 10px var(--mono);
  color: var(--pink);
}
.chart-details summary {
  cursor: pointer;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.chart-details summary::before {
  content: "+";
  margin-right: 8px;
}
.chart-details[open] summary::before {
  content: "−";
}
.chart-details .table-scroll {
  max-height: 210px;
}
.recent-card {
  padding-bottom: 12px;
}
.recent-card .card-heading {
  margin-bottom: 16px;
}
.text-link {
  font: 10px var(--mono);
  color: var(--pink);
  white-space: nowrap;
}
.text-link > span {
  margin-left: 5px;
}
.recent-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid #63374f;
}
.entry-icon {
  width: 32px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #8a526d;
  flex-shrink: 0;
  color: var(--pink);
  background: #ff96c80a;
}
.entry-icon.hold {
  color: #c5a7e4;
  border-color: #795689;
}
.entry-icon .icon {
  width: 16px;
  height: 16px;
}
.entry-info {
  flex: 1;
  min-width: 0;
}
.entry-info strong {
  font-size: 11px;
  font-weight: 500;
}
.entry-info p {
  font: 9px/1.6 var(--mono);
  color: var(--muted);
  margin: 5px 0 0;
}
.result-pill {
  display: inline-block;
  padding: 5px 8px;
  font: 9px var(--mono);
  border: 1px solid #9b5c7c;
  color: var(--pink);
  background: #ff96c80a;
}
.result-pill.hold {
  border-color: #795689;
  color: #c5a7e4;
  background: #a474d610;
}
.archive-note {
  position: relative;
  padding: 19px 23px;
  border: 1px dashed #90647b;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, #fadadd04 10px 11px),
    #2c1023;
}
.note-index,
.note-redaction {
  font: 8px/1.6 var(--mono);
  letter-spacing: 1.2px;
  color: var(--muted);
}
.archive-note p {
  margin: 12px 0;
  color: var(--rail);
  font:
    17px/1.5 Georgia,
    serif;
}
.archive-note em {
  color: var(--pink);
}
.note-redaction .redacted {
  margin-left: 9px;
}
.empty-state {
  padding: 25px 12px 32px;
  text-align: center;
  color: var(--muted);
  font: 11px/1.9 var(--mono);
}
.empty-sigil {
  width: 35px;
  height: 35px;
  display: block;
  margin: 0 auto 14px;
  color: #b17a99;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 29px 0;
  font: 9px/1.7 var(--mono);
  color: var(--muted);
}
footer span span {
  margin: 0 5px;
  color: var(--pink);
}
/* History, account controls, errors, and editing retain their existing interaction model. */
.history-filters {
  display: flex;
  align-items: end;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.history-filters > div {
  flex: 1;
  min-width: 130px;
}
.table-scroll {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font: 11px var(--mono);
  white-space: nowrap;
}
th {
  font-size: 10px;
  font-weight: 500;
  color: var(--pink);
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 14px 10px;
  border-bottom: 1px solid #63374f;
  color: var(--muted);
}
td:first-child {
  color: var(--rail);
}
td .text-button {
  font-size: 10px;
  padding: 5px;
  min-width: 42px;
}
td small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 5px;
}
#load-more {
  margin: 18px auto 0;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.section-copy {
  font-size: 13px;
  line-height: 1.85;
  color: var(--muted);
  margin: 15px 0 20px;
}
#settings-form > input,
#settings-form > select {
  margin-bottom: 20px;
}
.settings-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.danger {
  background: #f66f880b;
  color: #ffabbc;
  border-color: #b76378;
}
.danger:hover {
  background: #f66f8822;
}
.notice {
  margin-top: 20px;
  border: 1px solid #ffabbc;
  background: #421226;
  color: #ffd2de;
  padding: 15px;
  font-size: 13px;
  line-height: 1.8;
}
dialog {
  border: 1px solid var(--rail);
  background: var(--panel-deep);
  max-width: 480px;
  width: calc(100% - 32px);
  max-height: 90dvh;
  padding: 26px;
  box-shadow: 5px 5px 0 #ff96c833;
  color: inherit;
}
dialog::backdrop {
  background: #10040dd9;
  backdrop-filter: blur(3px);
}
dialog .primary {
  width: 100%;
  margin-top: 15px;
}
.icon-button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--pink);
  width: 40px;
  min-height: 40px;
  font-size: 22px;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 22px;
  background: var(--rail);
  color: var(--page);
  border: 1px solid var(--pink);
  box-shadow: 4px 4px 0 #1a0611;
  font-size: 12px;
  max-width: calc(100% - 32px);
  width: max-content;
  z-index: 10;
  line-height: 1.7;
}
.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 30px;
  background: var(--page);
  z-index: 20;
}
.sync-card {
  grid-column: 1/-1;
}
.sync-conflict {
  padding: 16px;
  margin-top: 16px;
  border: 1px solid #b76378;
  font-size: 12px;
}
.sync-conflict pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 260px;
  overflow: auto;
  font-size: 11px;
  line-height: 1.7;
}
.sync-conflict button {
  margin: 5px 8px 0 0;
}
#account-status {
  overflow-wrap: anywhere;
}
@media (min-width: 1500px) {
  main {
    padding: 0 60px;
  }
  .app-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .sidebar {
    padding-left: 27px;
    padding-right: 27px;
  }
  .dashboard-grid {
    gap: 30px;
  }
  .card {
    padding: 29px;
  }
}
@media (max-width: 1200px) {
  .app-shell {
    grid-template-columns: 215px minmax(0, 1fr);
  }
  .sidebar {
    padding: 31px 16px 22px;
  }
  .brand > span {
    font-size: 16px;
  }
  .brand-sub {
    font-size: 7px;
  }
  main {
    padding: 0 27px;
  }
  .topbar-actions {
    gap: 9px;
  }
  .breadcrumb {
    font-size: 8px;
  }
  .dashboard-grid {
    gap: 18px;
    grid-template-columns: minmax(280px, 1fr) minmax(275px, 1fr);
  }
  .card {
    padding: 20px;
  }
  .log-card {
    padding: 23px;
  }
  .card-heading {
    gap: 8px;
  }
  h2 {
    font-size: 16px;
  }
  .pill {
    font-size: 7px;
    padding: 6px;
  }
  .stat-card {
    padding: 16px 14px;
  }
  .stat-foot {
    font-size: 9px;
  }
  .dossier-seal {
    width: 125px;
  }
}
@media (max-width: 980px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .chart {
    min-height: 0;
  }
  .dossier-heading h1 {
    font-size: 53px;
  }
  .dossier-seal {
    width: 100px;
  }
  .dossier-seal > svg {
    width: 78px;
    height: 78px;
  }
  .dossier-seal > span {
    font-size: 6px;
    letter-spacing: 0.9px;
  }
  .dossier-seal > strong {
    font-size: 10px;
  }
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 0;
  }
  .topbar-actions {
    flex: 1;
    justify-content: flex-end;
  }
  .stat-top {
    font-size: 9px;
  }
  .stat-icon {
    display: none;
  }
  .stat-value {
    font-size: 32px;
  }
  .archive-strip {
    letter-spacing: 1px;
  }
  .archive-strip span:last-child {
    font-size: 7px;
  }
}
@media (max-width: 680px) {
  .app-shell {
    display: block;
  }
  .sidebar {
    position: relative;
    height: auto;
    display: block;
    border-right: 0;
    border-bottom: 1px solid var(--rail);
    box-shadow:
      inset 0 -3px #d89aab,
      inset 0 -4px #fff0f4;
    padding: 21px 18px 4px;
  }
  .brand {
    gap: 10px;
  }
  .brand > span {
    font-size: 20px;
  }
  .brand-sub {
    font-size: 8px;
  }
  .brand-sigil {
    width: 30px;
    height: 35px;
  }
  .sidebar-code,
  .nav-label,
  .sidebar-bottom {
    display: none;
  }
  .sidebar nav {
    display: flex;
    margin-top: 20px;
    gap: 5px;
  }
  .nav-item {
    flex: 1;
    flex-direction: column; /* Stack each icon over its one-word destination label. */
    min-width: 0;
    text-align: center;
    justify-content: center;
    gap: 7px;
    font-size: 11px;
    padding: 10px 6px;
    margin: 0;
    min-height: 45px;
  }
  .nav-item small {
    display: none;
  }
  .nav-item .icon {
    width: 15px;
    height: 15px;
  }
  .nav-item.active {
    box-shadow: inset 0 -2px var(--pink);
    border-bottom: 0;
  }
  main {
    padding: 0 18px;
  }
  .topbar {
    padding: 13px 0;
    min-height: 62px;
  }
  .breadcrumb {
    font-size: 8px;
  }
  .topbar-actions {
    flex: 1 1 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .local-badge {
    font-size: 9px;
    max-width: 210px;
  }
  .topbar .small {
    min-height: 36px;
    font-size: 8px;
  }
  .archive-strip {
    margin-top: 21px;
    padding: 8px;
    font-size: 8px;
  }
  .archive-strip span:last-child {
    font-size: 6px;
    letter-spacing: 0.2px;
  }
  .page-heading {
    margin: 26px 0;
    gap: 10px;
  }
  .dossier-heading {
    display: none; /* Keep the decorative title and seal out of the mobile recording area. */
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  h1 {
    font-size: 30px;
    letter-spacing: -1.5px;
  }
  .dossier-heading h1 {
    font-size: clamp(38px, 9vw, 58px);
    letter-spacing: -2px;
  }
  .subtitle {
    font-size: 12px;
    margin-top: 12px;
  }
  .dossier-date {
    font-size: 8px;
    letter-spacing: 0.6px;
    margin-top: 14px;
  }
  .dossier-seal {
    width: 78px;
  }
  .dossier-seal > svg {
    width: 63px;
    height: 63px;
  }
  .dossier-seal > span {
    font-size: 5px;
    letter-spacing: 0.4px;
  }
  .dossier-seal > strong {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .stats-grid {
    gap: 8px;
    margin-bottom: 21px;
  }
  .stat-card {
    padding: 12px 10px 17px;
  }
  .stat-top {
    font-size: 8px;
    min-height: 24px;
  }
  .stat-value {
    font-size: 28px;
    margin: 8px 0;
  }
  .stat-value small {
    font-size: 9px;
  }
  .stat-foot {
    font-size: 8px;
    padding: 0;
  }
  .stat-card::before {
    right: 5px;
    bottom: 4px;
    font-size: 7px;
  }
  .card {
    padding: 19px;
  }
  .log-card {
    padding: 23px 20px;
  }
  .card-heading {
    gap: 8px;
    margin-bottom: 21px;
  }
  .card-heading h2 {
    font-size: 16px;
  }
  .card-heading p {
    font-size: 10px;
  }
  input:not([type="radio"]):not([type="range"]),
  select {
    font-size: 16px;
  }
  .compact-select {
    font-size: 12px;
  }
  .manual-row select {
    font-size: 16px;
  }
  .field-pair {
    gap: 12px;
  }
  label,
  legend {
    font-size: 10px;
  }
  .field-help,
  .prompt-note {
    font-size: 11px;
  }
  .button {
    padding: 11px 12px;
  }
  .new-diaper {
    font-size: 10px;
    padding: 11px 6px;
  }
  .left-column,
  .right-column {
    gap: 19px;
  }
  .chart-tabs button {
    padding: 7px 10px;
  }
  .entry-info p {
    font-size: 8px;
  }
  .settings-grid {
    gap: 19px;
  }
  .history-filters > div {
    min-width: 100px;
  }
  .page-heading > .button {
    font-size: 10px;
    padding: 9px;
  }
  .page-heading > .button .icon {
    display: none;
  }
  footer {
    font-size: 8px;
    flex-wrap: wrap;
    gap: 9px;
  }
  .toast {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 360px) {
  main {
    padding: 0 12px;
  }
  .sidebar {
    padding-left: 12px;
    padding-right: 12px;
  }
  .nav-item {
    font-size: 10px;
    gap: 5px;
  }
  .dossier-seal {
    display: none;
  }
  .card,
  .log-card {
    padding: 20px 15px;
  }
  .pill {
    display: none;
  }
  .local-badge {
    max-width: 185px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Protocol records share the existing terminal cards and stay readable on narrow screens. */
.protocol-card { margin-bottom: 24px; }
.protocol-card .stat-value { color: var(--pink, #ff96c8); }
.wetting-card { padding: 24px; }
.wetting-panels { display: grid; gap: 22px; } /* Keep the change card beneath the wetting form on desktop; mobile gives each its own action. */
.diaper-change-card .button { width: 100%; margin-top: 18px; }
.wetting-card .button { margin-top: 18px; width: 100%; }
.probability-number input[readonly] { cursor: default; }
.roll-button:disabled { opacity: .6; cursor: wait; }
.roll-card { padding: 24px; }
#save-observation { width: 100%; margin-top: 18px; }
.intake-unit-toggle { width: 100%; margin-top: 8px; min-height: 44px; } /* Keep the unit switch easy to tap in narrow form columns. */
.roll-mode-option { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.roll-mode-option input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; } /* Keep the optional mode touch target readable on narrow roll cards. */

/* Quick actions share the existing page routes; only phones switch between individual dashboard cards. */
.mobile-actions { display: none; }
[data-message-shortcut] { position:relative; }
.message-badge { position:absolute;top:4px;right:4px;min-width:17px;min-height:17px;padding:1px 4px;border-radius:12px;background:var(--pink);color:var(--page);font:bold 10px/15px 'Segoe UI',sans-serif;box-shadow:0 0 0 2px var(--panel);text-align:center; }
@media (max-width: 680px) {
  :root { --mobile-actions-height: 78px; }
  body { padding-bottom: calc(var(--mobile-actions-height) + env(safe-area-inset-bottom, 0px) + 16px); }
  html { scroll-padding-bottom: calc(var(--mobile-actions-height) + env(safe-area-inset-bottom, 0px) + 16px); }
  .mobile-actions {
    position: fixed;
    inset: auto 0 0;
    z-index: 9;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    border-top: 1px solid var(--rail);
    background: var(--panel-deep);
    box-shadow: 0 -6px 24px #1a061180;
  }
  .mobile-actions a {
    min-width: 0;
    min-height: var(--mobile-actions-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 3px;
    color: var(--muted);
    font: 11px/1.25 "Segoe UI", system-ui, sans-serif;
    text-align: center;
    overflow-wrap: anywhere; /* Longer labels such as "Record observation" wrap inside their column instead of widening the page at 320px. */
    hyphens: auto;
  }
  .mobile-actions a[aria-current="page"] {
    color: var(--pink);
    background: var(--panel);
    box-shadow: inset 0 3px var(--pink);
  }
  .mobile-actions a:focus-visible { outline-offset: -4px; }
  .mobile-actions .icon { width: 20px; height: 20px; }
  .dashboard-grid > .left-column, .dashboard-grid > .right-column, .wetting-panels { display: contents; }
  [data-mobile-panel] { scroll-margin-top: 16px; }
  [data-mobile-panel][data-active="false"] { display: none; }
  .toast { bottom: calc(var(--mobile-actions-height) + env(safe-area-inset-bottom, 0px) + 16px); }
}

/* Four named desperation steps remain easy to read and drag on a phone. */
.desperation-control { margin: 20px 0; }
.desperation-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.desperation-heading label { margin: 0; }
.desperation-heading output { color: var(--pink); font: 13px var(--mono); }
#roll-desperation { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: var(--pink); cursor: pointer; }
.desperation-labels { display: flex; justify-content: space-between; color: var(--muted); font: 11px var(--mono); }

/* Collection layouts wrap on phones without changing the five recording shortcuts. */
.economy-balances { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(6px,2vw,24px); } /* Keep all three wallet totals together on every screen size. */
.economy-balances p { min-width:0; font-size:clamp(11px,2.8vw,14px); white-space:nowrap; }
.economy-balances strong { display:block; font-size:clamp(1.25rem,5vw,2rem); white-space:normal; overflow-wrap:anywhere; }
.sticker-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr)); gap:16px; }
.sticker-item { padding:16px; border:1px solid var(--border, #434047); overflow-wrap:anywhere; }
.sticker-item img { display:block; width:100%; height:120px; object-fit:contain; margin-bottom:12px; }
.sticker-item h3 { font-size:1rem; }
.sticker-item p { font-size:.85rem; }
.economy-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; align-items:end; }
.economy-form label { display:grid; gap:8px; }
.economy-form [hidden] { display:none; }
.economy-wide { grid-column:1/-1; }
.market-listings { display:grid; gap:12px; }
.market-offer { border-bottom:1px solid var(--border, #434047); padding:12px 0; overflow-wrap:anywhere; }
#economy-history { padding-left:20px; overflow-wrap:anywhere; font-family:var(--mono); } /* Align ledger text with the terminal monospace typography. */
#page-stickers .card { margin-bottom:20px; }

/* Keep administrator access separate from the six participant destinations. */
.admin-shortcut { position:fixed; right:max(12px,env(safe-area-inset-right,0px)); bottom:max(16px,env(safe-area-inset-bottom,0px)); z-index:8; min-height:44px; background:var(--panel); box-shadow:0 2px 8px #0008; }
@media (max-width: 680px) {
  .sidebar nav { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px; }
  .sidebar nav .nav-item { padding:10px 1px; white-space:nowrap; }
  .admin-shortcut { bottom:calc(var(--mobile-actions-height) + env(safe-area-inset-bottom,0px) + 12px); }
}

/* The sale dialog scrolls within a phone viewport and stays above fixed navigation. */
#market-dialog { overflow-y:auto; }
#market-dialog .card-heading { align-items:center; gap:12px; }
#market-dialog .card-heading h2 { margin:0; overflow-wrap:anywhere; }
#market-close { flex-shrink:0; }
#market-dialog-status:empty { display:none; }
#market-retry { margin-top:16px; }

/* The two equal copies loop horizontally without widening the page. */
.admin-reminder { display:flex; align-items:center; gap:12px; min-width:0; padding:12px; margin-bottom:24px; border:1px solid var(--border); background:var(--panel); }
.admin-reminder[hidden] { display:none; }
.reminder-label { flex:none; font-family:var(--mono); font-size:12px; color:var(--gold); }
.reminder-viewport { flex:1; min-width:0; overflow:hidden; }
.reminder-track { display:flex; width:max-content; animation:reminder-scroll var(--reminder-duration,25s) linear infinite; }
.reminder-copy { box-sizing:border-box; flex:none; min-width:var(--reminder-width,0px); padding-right:48px; white-space:nowrap; font-size:14px; line-height:1.6; }
#reminder-pause { flex:none; min-height:36px; padding:6px 10px; }
.admin-reminder.is-paused .reminder-track { animation-play-state:paused; }
@media(hover:hover) { .admin-reminder:hover .reminder-track { animation-play-state:paused; } }
@keyframes reminder-scroll { to { transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce) {
  .reminder-track { width:100%; animation:none; display:block; }
  .reminder-copy { display:block; min-width:0; padding:0; white-space:normal; overflow-wrap:anywhere; }
  #reminder-repeat,#reminder-pause { display:none; }
}

/* Admin-authored margin notes keep paragraph breaks and wrap long words inside their existing card. */
#margin-note[hidden] { display:none; }
#margin-note-text { white-space:pre-wrap; overflow-wrap:anywhere; }

/* Personal estimates share the active theme and the mobile Analysis panel. */
.prediction-window { font-size:1.5rem; font-weight:700; margin:12px 0 4px; }
.prediction-metrics { display:grid; gap:12px; margin:20px 0; }
.prediction-metrics dt { font-size:.8rem; opacity:.75; }
.prediction-metrics dd { margin:4px 0 0; overflow-wrap:anywhere; }
.prediction-card figure { margin:20px 0; }
.prediction-card svg { display:block; width:100%; height:auto; }
#prediction-bars { fill:currentColor; opacity:.7; }
.prediction-axis { display:flex; justify-content:space-between; font-size:.75rem; }
.prediction-card .card-heading { flex-wrap:wrap; }

/* The earned sticker stays prominent and the close control remains reachable on small screens. */
#observation-reward-dialog { text-align:center; overflow-y:auto; }
#observation-reward-dialog h2 { margin-top:0; }
#observation-reward-sticker { margin:20px 0; }
#observation-reward-image { max-width:100%; height:192px; object-fit:contain; }
#observation-reward-name { margin-top:12px; font-weight:700; }
#observation-reward-status { line-height:1.6; }

/* Desktop retains its sidebar; only mobile uses the modal directory. */
#navigation-content { display:contents; }
.topbar .menu-toggle { display:none; }
@media (max-width:680px) {
  #desktop-navigation { display:none; }
}
#main-navigation:not([open]) { display:none; }
#main-navigation { position:fixed; inset:0 auto 0 0; margin:0; width:min(340px,calc(100vw - 44px)); max-width:none; height:100dvh; max-height:100dvh; padding: max(18px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom)); border:0; border-right:1px solid var(--border); border-radius:0 22px 22px 0; overflow-y:auto; overscroll-behavior:contain; color:var(--ink); }
#main-navigation[open] { display:flex; flex-direction:column; }
#main-navigation::backdrop { background:#160c2466; backdrop-filter:blur(3px); }
.navigation-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
#main-navigation .brand { flex-shrink:0; }
#main-navigation .brand > span { display:block; font-size:20px; }
#main-navigation .brand-sub { display:block; font-size:9px; }
#main-navigation .sidebar-code { display:flex; margin-top:20px; }
#main-navigation .nav-label { display:block; margin:22px 0 12px; }
#main-navigation nav { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:0; }
#main-navigation .nav-item { display:flex; flex-direction:row; justify-content:flex-start; text-align:left; gap:12px; padding:12px; margin:0; min-height:48px; font-size:14px; white-space:normal; }
#main-navigation .nav-item .icon { width:20px; height:20px; }
#main-navigation .nav-item small { display:block; margin-left:auto; }
#main-navigation .nav-item.active { border-bottom:1px solid var(--border); }
#main-navigation .sidebar-bottom { display:block; margin-top:auto; padding-top:24px; }
.topbar-heading { display:flex; align-items:center; gap:12px; min-width:0; }
/* Reuse the existing sigil and wordmark beside the mobile menu without a bulky image. */
#topbar-brand { gap:9px; min-width:0; }
#topbar-brand > span { font:800 22px/1.2 'Segoe UI',sans-serif; letter-spacing:-.6px; white-space:nowrap; }
#topbar-brand .brand-sub { font:11px/1.5 'Segoe UI',sans-serif; letter-spacing:.3px; margin-top:5px; }
#topbar-brand .brand-sigil { width:30px; height:36px; }
@media (max-width:680px) {
  .topbar-heading { width:100%; }
  #topbar-brand > span { font-size:20px; }
  #topbar-brand .brand-sub { font-size:9px; }
  #topbar-brand .brand-sigil { width:26px; height:32px; }
}
@media (max-width:680px) {
  .topbar-heading::before { content:""; flex:0 0 88px; height:44px; } /* Reserve the menu's original space beside the logo. */
  .topbar .menu-toggle { display:inline-flex; position:fixed; top:max(13px,env(safe-area-inset-top,0px)); left:max(18px,env(safe-area-inset-left,0px)); z-index:12; width:88px; background:var(--panel); align-items:center; justify-content:center; gap:8px; min-height:44px; font-size:12px; box-shadow:0 3px 12px #0003; } /* Keep the mobile opener reachable throughout page scrolling. */
}
html.navigation-open,html.navigation-open body { overflow:hidden; }
@media(prefers-reduced-motion:no-preference) {
  #main-navigation[open] { animation:navigation-enter 160ms ease-out; }
  @keyframes navigation-enter { from { transform:translateX(-100%); } to { transform:translateX(0); } }
}

/* Decorative confetti stays inside the dialog and never intercepts taps or keyboard focus. */
#reward-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; z-index:1; }
#reward-confetti span { position:absolute; left:50%; top:38%; width:8px; height:12px; border-radius:2px; }
#reward-confetti span:nth-child(3n) { border-radius:50%; width:9px; height:9px; }
#reward-sound { margin:0 0 16px; }
@media(prefers-reduced-motion:reduce) { #reward-confetti { display:none; } }

.notification-actions { display:flex; flex-wrap:wrap; gap:10px; }
.notification-actions .button { white-space:normal; }

.notification-option { display:flex; align-items:center; gap:10px; margin:18px 0; }
#notification-admin-messages,#notification-community-support,#notification-community-anonymous,#notification-community-friends-only { width:20px; height:20px; min-height:0; margin:0; padding:0; flex:0 0 20px; }

.games-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0; }
.game-card { display:flex;flex-direction:column;gap:12px;min-width:0;overflow:hidden; }
.game-card h2,.game-card p { margin:0; } .game-card > p:not(.eyebrow):not(.game-price) { color:var(--muted);line-height:1.65; }
.game-art { display:grid;place-items:center;min-height:150px;border-radius:16px;background:var(--panel-deep);font-size:82px;color:var(--pink); }
.game-art-balldrop { color:var(--orchid); background:radial-gradient(circle at 35% 30%,var(--panel),var(--panel-deep)); }
.game-art-hangman { color:var(--orchid); }
.game-price { padding-top:12px; } .game-card .button { margin-top:auto;text-align:center;white-space:normal; }
.games-help p { line-height:1.7; } .game-offline { opacity:.6;cursor:not-allowed; }
.friends-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:24px; }
.friend-row { display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere; }
.friend-row > div:first-child,.friend-row > strong:first-child { flex:1 1 160px; }
.friend-row p { margin:4px 0; }
.friend-shared-card { margin:20px 0;padding:20px;border:1px solid var(--border);border-radius:16px; }
.friend-record-details { display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,2fr);gap:8px 16px;overflow-wrap:anywhere; }
.friend-record-details dt { color:var(--muted); }.friend-record-details dd { margin:0; }
#friend-share-dialog { width:min(620px,calc(100vw - 32px));max-height:85dvh;overflow-y:auto; }
#friend-search-form .button { margin-top:16px; }
.status-gallery { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0; }
.status-gallery img { display:block;width:100%;height:auto;max-height:540px;object-fit:contain;border-radius:12px; }
.status-card { padding:22px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere; }
.status-picture-preview { min-width:0; }.status-picture-preview label { display:block; }
.social-body { white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65; }
#status-text,#message-text { display:block;width:100%;min-width:0;min-height:110px;resize:vertical;margin-bottom:16px;padding:12px;border:1px solid var(--border);background:var(--page);color:var(--ink);font:inherit;line-height:1.5; }
#status-text:focus-visible,#message-text:focus-visible { outline:2px solid var(--gold);outline-offset:4px; }
.conversation-list { display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px; }
.conversation-button { max-width:100%;white-space:normal;overflow-wrap:anywhere; }
.message-list { max-height:55vh;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:12px 0; }
.message-bubble { max-width:90%;padding:16px;border:1px solid var(--border);border-radius:16px;align-self:flex-start;overflow-wrap:anywhere; }
.message-own { align-self:flex-end;background:var(--panel-deep); }
.message-bubble .button { display:block;margin-top:10px; }
#status-form .button,#message-form .button { margin-top:12px; }
@media(max-width:480px) { .status-gallery { grid-template-columns:1fr; } }
@media(max-width:700px) { .friends-grid { grid-template-columns:1fr; } }
@media(max-width:1100px) { .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .games-grid { grid-template-columns:1fr; } .game-art { min-height:120px; } }

.notification-option input[type="checkbox"] { width:20px;height:20px;min-height:0;margin:0;padding:0;flex:0 0 20px; }
.social-comments { margin-top:16px; }.social-comments summary { cursor:pointer;padding:12px 0; }.social-comment { padding:14px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere; }
.social-comments textarea { width:100%;min-height:90px;resize:vertical;padding:12px;background:var(--page);color:var(--ink);border:1px solid var(--border);font:inherit; }
.social-comments form { margin-top:16px; }.social-actions { display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px; }
.activity-unread { border-left:4px solid var(--pink);padding-left:16px; }.activity-card { padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--border);overflow-wrap:anywhere; }
.social-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px; }
.social-heading h2 { font-size:20px;margin:0; }
#page-social .page-heading { flex-wrap:wrap; }
#page-social .page-heading > div { min-width:0;flex:1 1 260px; }
#page-social h1 { overflow-wrap:anywhere; }
.social-navigation { position:fixed;bottom:0;z-index:9;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--panel-deep);border-top:1px solid var(--border);box-shadow:0 -4px 18px #0002; }
.social-navigation a { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:78px;padding:10px 4px;color:var(--muted);font-size:clamp(9px,2.5vw,14px);line-height:1.3;text-align:center;overflow-wrap:anywhere; }
.social-navigation a[aria-current="page"] { color:var(--pink);background:var(--panel);box-shadow:inset 0 3px var(--pink);font-weight:700; }
.social-navigation a:focus-visible { outline-offset:-5px; }
.social-navigation .icon { width:22px;height:22px; }
.social-active main { padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); }
html.social-active { scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); }
.social-active .mobile-actions { display:none; }
.social-active .admin-shortcut { bottom:calc(90px + env(safe-area-inset-bottom,0px)); }

.profile-avatar { display:inline-flex;position:relative;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;border-radius:50%;overflow:hidden;background:var(--panel-deep);color:var(--pink);border:1px solid var(--border);font-size:20px; }
.profile-avatar img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.social-identity { display:inline-flex;align-items:center;gap:10px;min-width:0;overflow-wrap:anywhere; }
.social-identity h3 { margin:0; }
.profile-preview .profile-avatar { width:96px;height:96px;flex-basis:96px;font-size:40px; }
#profile-file { max-width:100%; }
.conversation-button { display:flex;align-items:center;gap:10px; }

/* Posted photos scroll independently; the composer keeps its editable preview grid. */
.post-single-picture { grid-template-columns:1fr; }
.post-gallery { min-width:0;max-width:100%;margin:16px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.post-gallery-track { display:flex;width:100%;height:clamp(200px,65vw,540px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;background:var(--panel-deep); }
.post-gallery-track::-webkit-scrollbar { display:none; }
.post-gallery-track:focus-visible { outline:3px solid var(--pink);outline-offset:-3px; }
.post-gallery-slide { flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:start;scroll-snap-stop:always; }
.post-gallery-slide img { display:block;width:100%;height:100%;object-fit:contain; }
.post-gallery-controls { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px; }
.post-gallery-controls button { min-height:44px;white-space:normal; }
.post-gallery-counter { flex-shrink:0;font-variant-numeric:tabular-nums;color:var(--muted); }
.post-photo-open { display:block;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;cursor:zoom-in; }
html.photo-viewing { overflow:hidden; }
#photo-viewer { position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);border:0;border-radius:0;background:#080808;color:#fff;box-shadow:none;overflow:hidden; }
#photo-viewer[open] { display:flex;flex-direction:column; }
#photo-viewer::backdrop { background:#080808; }
.photo-viewer-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;flex-shrink:0; }
#photo-viewer .button { min-height:44px;padding:8px 12px;font:14px/1.3 'Segoe UI',sans-serif;border:1px solid #777;border-radius:6px;background:#222;color:#fff;box-shadow:none; }
#photo-viewer .post-gallery { display:flex;flex:1;flex-direction:column;min-height:0;margin:0;border:0;border-radius:0; }
#photo-viewer .post-gallery-track { flex:1;min-height:0;height:auto;background:#080808; }
#photo-viewer .post-gallery-slide img { width:100%;height:100%;max-height:none;object-fit:contain; }
#photo-viewer .post-gallery-controls { flex-shrink:0;padding:8px 12px; }
#photo-viewer .post-gallery-counter { color:#fff; }
.photo-viewer-caption { flex-shrink:0;max-height:15dvh;overflow:auto;margin:0;padding:0 12px 10px;font:13px/1.4 'Segoe UI',sans-serif;overflow-wrap:anywhere;text-align:center; }
.photo-viewer-caption:empty { display:none; }
@media(max-width:480px) { .post-gallery-controls { gap:6px;padding:8px; }.post-gallery-controls button { padding:8px;font-size:12px; } }

.social-identity { color:inherit;text-decoration:none; }
.social-identity:hover strong,.social-identity:hover h3 { text-decoration:underline; }
.member-heading { display:flex;align-items:center;gap:16px;overflow-wrap:anywhere; }
.member-heading .profile-avatar { width:80px;height:80px;flex-basis:80px; }
.member-heading h2 { min-width:0; }
.conversation-row { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }

/* Social's mobile shell scrolls between the header and tabs; desktop retains normal document flow. */
.social-mobile-only { display:none; }
.social-content,.message-inbox,.message-thread { display:contents; }
#social-access-gate { max-width:540px;overflow:auto; }
#social-access-gate h1 { font-size:24px; }
#social-access-actions { display:flex;flex-wrap:wrap;gap:8px; }
.social-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
@media(max-width:680px) {
 html.social-active,html.social-active body { height:100%;overflow:hidden; }
 html.social-active body { overflow:clip; } /* Focusing a reply must not scroll the body behind the fixed-height shell. */
 .social-active .app-shell { height:var(--social-viewport-height,100dvh);min-height:0;overflow:hidden; }
 .social-active main { height:100%;min-height:0;display:flex;flex-direction:column;padding:0 10px;overflow:hidden; }
 .social-active main > footer,.social-active .social-heading,.social-active .social-desktop-only { display:none; }
 .social-active .topbar { flex:0 0 auto;min-height:48px;padding:4px 0;gap:6px;flex-wrap:nowrap; }
 .social-active .topbar-heading { width:auto;gap:8px; }
 .social-active .topbar-heading::before { display:none; }
 .social-active .topbar .menu-toggle { position:static;width:auto;min-height:36px;padding:6px 8px;box-shadow:none; }
 .social-active .topbar .brand { font-size:15px;gap:0; }
 .social-active .topbar .brand-sigil,.social-active .topbar .brand-sub,.social-active .topbar .local-badge,.social-active #install-button { display:none; }
 .social-active .topbar-actions { flex:1;gap:5px;flex-wrap:nowrap;justify-content:flex-end; }
 .social-active .topbar .sync-summary { gap:0; }
 .social-active .topbar #topbar-sign-in { font-size:10px;min-height:36px;padding:5px; }
 .social-active #topbar-notifications { font-size:0;min-height:36px;padding:7px;gap:0; }
 .social-active #topbar-notifications .icon { width:20px;height:20px; }
 #page-social:not([hidden]) { display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden; }
 #page-social .social-content { display:block;flex:1;min-height:0;overflow:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable; }
 #page-social .page { margin:0;padding:0;min-width:0; }
 #page-social .page-heading { position:sticky;top:0;z-index:3;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;padding:8px 2px;background:var(--page);border-bottom:1px solid var(--border); }
 #page-social .page-heading > div { flex:1;min-width:0; }
 #page-social .page-heading .eyebrow,#page-social .page-heading .subtitle { display:none; }
 #page-social h1 { font-size:20px;line-height:1.2;margin:0;letter-spacing:0; }
 #page-social h2 { font-size:16px;line-height:1.3;margin:0 0 8px; }
 #page-social h3 { font-size:14px;line-height:1.3;margin:0; }
 #page-social .card { padding:10px;margin:8px 0;border-radius:8px;box-shadow:none; }
 #page-social p { font-size:13px;line-height:1.45;margin:6px 0; }
 #page-social .field-help { font-size:12px;line-height:1.4; }
 #page-social [role=status]:empty { display:none; }
 #page-social .button { min-height:36px;padding:7px 10px;font-size:12px;border-radius:7px;box-shadow:none; }
 #page-social label { font-size:12px;margin:6px 0 3px; }
 #page-social input,#page-social select { min-height:38px;padding:7px 9px;font-size:16px; }
 #page-social textarea { font-size:16px;min-height:72px;padding:8px;line-height:1.4; }
 #page-social .status-card { padding:12px 0; }
 #page-social .status-card:first-child { padding-top:4px; }
 #page-social .card-heading { margin:0;gap:8px; }
 #page-social .profile-avatar { width:32px;height:32px;flex-basis:32px;font-size:15px; }
 #page-social .social-identity { gap:7px; }
 #page-social .member-heading { gap:10px; }
 #page-social .member-heading .profile-avatar { width:48px;height:48px;flex-basis:48px; }
 #page-social .social-actions,#page-social .notification-actions { gap:6px;margin-top:6px; }
 #page-social .social-comments { margin-top:6px; }
 #page-social .social-comments summary { padding:6px 0;font-size:12px; }
 #page-social .social-comment { padding:8px 0; }
 #page-social .social-comments form { margin-top:8px; }
 #page-social .post-gallery { margin:8px 0; }
 #page-social .post-gallery-track { height:clamp(160px,36dvh,300px); }
 #page-social .post-single-picture img { max-height:300px; }
 #page-social .post-gallery-controls { padding:4px 6px; }
 #page-social .status-picture-preview img { height:96px;object-fit:cover; }
 #page-social #status-picture-preview { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
 #page-social .friend-row { padding:8px 0;gap:8px; }
 #page-social .friends-grid { gap:0; }
 #page-social .friend-shared-card { margin:8px 0;padding:10px;border-radius:8px; }
 #page-social .activity-card { padding:10px 0; }
 #page-social .activity-unread { padding-left:8px; }
 #page-social .social-navigation { position:relative;left:0!important;right:0!important;bottom:auto;flex:0 0 auto;width:100%;margin:0;box-shadow:none;padding-bottom:env(safe-area-inset-bottom,0px); }
 #page-social .social-navigation a { min-height:56px;padding:4px 1px;gap:3px;font-size:9px;line-height:1.15; }
 #page-social .social-navigation .icon { width:19px;height:19px; }
 .social-active .admin-shortcut { bottom:calc(62px + env(safe-area-inset-bottom,0px));min-height:32px;padding:5px;font-size:0; }
 #page-social .social-mobile-only { display:block; }
 #page-social .mobile-extra { display:none; }
 #page-social details.mobile-help { margin:6px 0;font-size:12px; }
 #page-social .post-copy-collapsed { display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden; }
 #page-social[data-section=messages] .social-content { display:flex;overflow:hidden; }
 #page-messages:not([hidden]) { flex:1;min-height:0;display:flex;flex-direction:column; }
 #page-messages .page-heading { flex:0 0 auto;position:static; }
 #page-messages .message-workspace { flex:1;min-height:0;margin:0;padding:0;display:flex;overflow:hidden;border:0;background:transparent; }
 #page-messages .message-inbox { display:flex;flex:1;min-height:0;min-width:0;flex-direction:column; }
 #page-messages .inbox-tools { padding:8px 0;flex-shrink:0; }
 #page-messages .inbox-heading { display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:14px; }
 #page-messages #message-search { margin:0 0 6px; }
 #page-messages #message-filter { width:100%;margin:0; }
 #page-messages .conversation-list { flex:1;overflow-y:auto;min-height:0;display:block;margin:0; }
 #page-messages .conversation-row { display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;padding:10px 4px;border-bottom:1px solid var(--border); }
 #page-messages .conversation-row.is-unread { background:var(--panel);border-left:3px solid var(--pink); }
 #page-messages .conversation-row.is-selected { box-shadow:inset 0 -2px var(--pink); }
 #page-messages .conversation-row .social-identity { align-self:start; }
 #page-messages .conversation-button { display:block;text-align:left;white-space:normal;width:100%;min-width:0;padding:0;min-height:42px;border:0;background:none;box-shadow:none;color:var(--ink); }
 #page-messages .conversation-button strong { display:block;font-size:14px; }
 #page-messages .conversation-preview { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:400;color:var(--muted); }
 #page-messages .conversation-meta { display:block;font-size:10px;font-weight:400;color:var(--muted); }
 #page-messages #message-start { display:none;flex-shrink:0;padding:8px 0; }
 #page-messages[data-compose=true] #message-start { display:block; }
 #page-messages .message-thread { display:none; }
 #page-messages[data-thread=true] .message-inbox { display:none; }
 #page-messages[data-thread=true] .message-thread { display:flex;flex:1;min-width:0;min-height:0;flex-direction:column; }
 #page-messages .message-thread-heading { display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--border);flex-shrink:0;order:0; }
 #page-messages #message-peer { flex:1;min-width:0;font-size:13px; }
 #page-messages #message-status { order:1;flex-shrink:0; }
 #page-messages .message-paging { order:2;flex-shrink:0; }
 #page-messages .message-list { order:3;flex:1;min-height:0;max-height:none;overflow-y:auto;gap:0;padding:0;scrollbar-gutter:stable; }
 #page-messages .message-bubble { flex-shrink:0;align-self:stretch;max-width:100%;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:10px 4px;background:transparent; }
 #page-messages .message-bubble.message-own { background:var(--panel-deep); }
 #page-messages .message-bubble > .button { display:inline-block;margin:3px 0 0;padding:3px 6px;min-height:28px;font-size:10px; }
 #page-messages .message-bubble small { font-size:10px;color:var(--muted); }
 #page-messages #message-form { order:4;flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:8px 0;border-top:1px solid var(--border); }
 #page-messages #message-form > label { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
 #page-messages #message-text { min-height:62px;height:62px;max-height:120px;resize:vertical;margin:0; }
 #page-messages #message-send { margin:0;align-self:end;max-width:70px; }
 #page-messages .message-help { grid-column:1 / -1;font-size:10px; }
}

/* FetLife-style post options and threaded comments: compact text-link actions, relative times, indented reply threads. */
.status-card .card-heading { align-items:flex-start; } /* keep the audience pill and its menu top-aligned with the name */
.post-meta-side { display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto; } /* pill on top, Options dropdown directly underneath */
.post-menu { position:relative; }
.post-menu > summary { list-style:none;cursor:pointer;padding:2px 8px;border-radius:4px;color:var(--muted);font-size:12px;line-height:1.5;user-select:none; }
.post-menu > summary::-webkit-details-marker { display:none; } /* hide the default disclosure triangle */
.post-menu > summary::after { content:" \25BE"; } /* small down caret */
.post-menu > summary:hover,.post-menu[open] > summary { color:var(--ink);background:var(--panel-deep); }
.post-menu > summary:focus-visible { outline:2px solid var(--gold);outline-offset:2px; }
.post-menu-list { position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:150px;padding:4px 0;background:var(--panel-deep);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px #0005; }
.post-menu-item { display:block;width:100%;padding:9px 14px;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer; }
.post-menu-item:hover,.post-menu-item:focus-visible { background:var(--panel);color:var(--pink);outline:none; }
.post-menu-item.is-danger { color:var(--pink);font-weight:600; }
.link-action { display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:2px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer; }
.link-action:hover,.link-action:focus-visible { color:var(--pink);text-decoration:underline; }
.link-action:focus-visible { outline:2px solid var(--gold);outline-offset:2px; }
.link-action:disabled { opacity:.5;cursor:default; }
.link-action[aria-pressed="true"],.link-action.is-danger { color:var(--pink); }
.like-action::before { content:"\2661";font-size:15px;line-height:1; } /* hollow heart */
.like-action[aria-pressed="true"]::before { content:"\2665"; } /* filled heart once liked */
.post-action-bar,.comment-actions { display:flex;flex-wrap:wrap;align-items:center;gap:0 16px; }
.post-action-bar { margin-top:10px;padding-top:6px;border-top:1px solid var(--border); }
.social-time { color:var(--muted);font-size:12px;font-weight:400; }
.comment-thread { display:flex;flex-direction:column; }
.social-comment .comment-head { display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-width:0; }
.comment-head .social-identity strong { color:var(--pink);font-size:13px; } /* accent-coloured usernames */
.comment-head .profile-avatar,#page-social .comment-head .profile-avatar { width:28px;height:28px;flex-basis:28px;font-size:13px;border-radius:6px; }
.social-comment > .social-body,.social-comment > .comment-actions,.social-comment > .reply-form { margin-left:38px; } /* line up under the name, past the avatar */
#page-social .social-comment > .social-body { margin:4px 0 0 38px; }
.comment-replies { margin:8px 0 0 13px;padding-left:12px;border-left:2px solid var(--border); }
.comment-replies .social-comment { padding:8px 0;border-bottom:0; }
.comment-replies .comment-replies .comment-replies .comment-replies { margin-left:0;padding-left:0;border-left:0; } /* stop indenting past three levels */
/* 24/7 wear badge: small bold chip beside the Friends/Public pill and in Settings. */
.badge-247 { display:inline-block;margin-right:6px;padding:2px 8px;border-radius:999px;background:var(--pink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1.5;vertical-align:middle;white-space:nowrap; }
.feed-more { justify-content:center;min-height:1px; } /* infinite-scroll sentinel below the last post */
.feed-more .field-help { margin:8px 0;text-align:center; }
.feed-filters { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px; } /* "Show updates" and "Show" side by side */
.feed-filters select { width:100%; }
.post-pills { display:flex;align-items:center;justify-content:flex-end; } /* badge + audience pill on one row */
.post-pills .badge-247 { margin-right:4px; }
/* Sticker gifts in comments and messages: picker grid, chosen chip and the posted sticker. */
.sticker-picker { margin:6px 0; }
.sticker-choices { display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:8px;max-height:240px;overflow-y:auto; }
.sticker-choice { display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;background:var(--page);color:var(--ink);border:1px solid var(--border);border-radius:10px;cursor:pointer;font:inherit; }
.sticker-choice:hover,.sticker-choice:focus-visible { border-color:var(--pink); }
.sticker-choice .social-sticker img { width:64px;height:48px; }
.sticker-chosen { display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px; }
.sticker-chosen .social-sticker img { width:64px;height:48px; }
.social-sticker { margin:6px 0;display:inline-flex;flex-direction:column;align-items:center;gap:2px; }
.social-sticker img { width:120px;height:90px;object-fit:contain; }
.social-sticker figcaption { font-size:11px;color:var(--muted); }
.social-comment > .social-sticker { margin-left:38px; } /* line up with the comment text */
@media (max-width:680px) {
 .social-comment > .social-sticker { margin-left:0; }
 .sticker-choices { display:flex;gap:6px;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;scroll-snap-type:x proximity;overscroll-behavior-x:contain; } /* phones: one swipeable row instead of a tall grid */
 .sticker-choice { flex:0 0 76px;padding:4px;scroll-snap-align:start; }
 .sticker-choice .social-sticker { margin:0;width:100%; }
 .sticker-choice .social-sticker img,.sticker-chosen .social-sticker img { width:52px;height:40px; }
 .sticker-choice figcaption { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px; } /* long names shrink to one line */
 .sticker-choice small { font-size:10px;font-weight:700; }
 .sticker-chosen { gap:4px 10px; }
 .sticker-chosen .social-sticker { margin:0; }
 .sticker-chosen .field-help { flex:1 1 140px;margin:0;font-size:11px; }
 #page-messages #message-form #message-text { grid-column:1;grid-row:1; } /* text box and Send share the first row... */
 #page-messages #message-form #message-send { grid-column:2;grid-row:1; }
 #page-messages #message-form .sticker-picker { grid-column:1 / -1;grid-row:2;margin:0;min-width:0; } /* ...and the sticker picker gets its own full-width row */
 #page-messages #message-form .sticker-picker .link-action { min-height:28px;font-size:12px; }
 #page-messages .message-help { grid-row:3; }
 #page-messages .message-bubble > .social-sticker img { width:96px;height:72px; }
}
.message-bubble > .social-sticker { display:flex;width:fit-content;margin:6px 0; } /* sticker gets its own line under the sender's name */
.comment-removed { margin:4px 0;color:var(--muted);font-size:12px;font-style:italic; }
.reply-form { margin-top:8px; }
.social-comments .reply-form textarea { min-height:60px; }
.reply-buttons { display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px; }
.social-comments .reply-buttons .button { margin:0; }
@media(max-width:680px) {
 .social-comment > .social-body,.social-comment > .comment-actions,.social-comment > .reply-form,#page-social .social-comment > .social-body { margin-left:0; } /* phones: full width under the name */
 .comment-replies { margin-left:4px;padding-left:10px; }
 .post-action-bar,.comment-actions { gap:0 14px; }
}

/* Automatic record posts: a compact activity line ("Alice drank 250 mL of water") so they read differently from real status posts. */
.status-card.record-post { padding-left:12px;border-left:3px solid var(--orchid);background:linear-gradient(90deg,color-mix(in srgb,var(--orchid) 9%,transparent),transparent 70%); }
.status-card.record-post[data-record-kind="wetting"] { border-left-color:var(--pink); } /* diaper uses and accidents */
.status-card.record-post[data-record-kind="diaper-change"] { border-left-color:var(--gold); }
.record-summary { min-width:0;flex:1 1 auto; }
.status-card.record-post[data-record-kind="roll"] { border-left-color:var(--orchid); }
.roll-chips { display:flex;flex-wrap:wrap;gap:4px 6px;margin:4px 0 0; } /* Roll posts: mode and hold-streak chips */
.roll-chip { padding:1px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap; }
.roll-chip.is-desperate { border-color:var(--pink);color:var(--pink); }
.roll-chip.is-streak { border-color:var(--orchid);color:var(--ink); }
.record-line,#page-social .record-line { display:flex;align-items:flex-start;gap:8px;margin:0;min-width:0;font-size:15px;line-height:1.45; }
.record-sentence { min-width:0;padding-top:2px;overflow-wrap:anywhere; } /* name + action wrap as one sentence */
.record-icon { font-size:20px;line-height:1.3;flex:0 0 auto; }
.record-line .profile-avatar,#page-social .record-line .profile-avatar { flex:0 0 24px;margin-top:1px; width:24px;height:24px;flex-basis:24px;font-size:12px;border-radius:6px; }
.record-name { color:var(--pink);font-weight:700;text-decoration:none; }
.record-name:hover { text-decoration:underline; }
.record-when,#page-social .record-when { margin:2px 0 0;color:var(--muted);font-size:12px; }
.record-meta,#page-social .record-meta { margin:4px 0 0;font-size:11px;letter-spacing:.04em;text-transform:uppercase; } /* "AUTO-LOGGED · 5 minutes ago" */
.record-meta .social-time { font-size:11px;text-transform:none;letter-spacing:0; }
.status-card.record-post .post-action-bar { margin-top:6px;padding-top:4px; }
#page-social .status-card.record-post { padding:10px 0 10px 10px; }