/* Design tokens (note 51). Every color used anywhere in this file lives here —
   when adding new rules, pick a token (or add one) rather than hardcoding a
   value. Type + spacing are in rem (1rem = 16px at browser defaults, so the
   numbers below map 1:1 to the old px values); only hairline borders, layout
   breakpoints, and fixed element dimensions (icons, avatars, rings) stay px. */
:root {
  /* Font stacks */
  --font-sans: 'Roboto', Arial, "Segoe UI", sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;

  /* Core palette */
  --bg: #f8f9fa;
  --surface: #ffffff;
  --border: #dadce0;
  --border-light: #e8eaed;
  --text: #202124;
  --muted: #5f6368;

  /* Inverse surfaces: tooltips, the offline banner, text on filled buttons */
  --surface-inverse: #202124;
  --text-inverse: #ffffff;

  /* Accents */
  --primary: #1a73e8;
  --primary-hover: #1765cc;
  --primary-tint: #e8f0fe;
  --primary-tint-text: #1967d2;
  --danger: #d93025;
  --danger-tint: #fce8e6;
  --success: #188038;
  --success-tint: #e6f4ea;
  --warning: #b06000;
  --warning-tint: #fef7e0;
  --backlog: #7b1fa2;
  --backlog-tint: #f3e8fd;
  --favourite: #f9ab00;

  /* Overlays & scrims (lightbox, upload overlay, hover veils) */
  --scrim: rgba(0, 0, 0, .9);
  --scrim-soft: rgba(32, 33, 36, .6);
  --overlay-hover: rgba(0, 0, 0, .4);
  --overlay-btn: rgba(255, 255, 255, .1);
  --overlay-btn-hover: rgba(255, 255, 255, .2);
  --dot-outline: rgba(0, 0, 0, .15);

  /* Shape & elevation */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  /* Guard against stray horizontal scroll on mobile (note 41). `clip` (not
     `hidden`) so it doesn't turn .wrap into a scroll container and break the
     sticky checklist progress bar. */
  overflow-x: clip;
}

.card {
  background: var(--surface);
  border: none;
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}

h1 { font-size: 1.375rem; font-weight: 400; margin: 0 0 .5rem; letter-spacing: 0; }
p.muted { color: var(--muted); margin-top: 0; line-height: 1.5; }

.btn {
  display: inline-block;
  background: var(--primary);
  color: var(--text-inverse);
  border: none;
  padding: .625rem 1.5rem;
  border-radius: 20px;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .1px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--primary-hover); box-shadow: var(--shadow-1); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--primary);
}
.btn-outline:hover { background: var(--primary-tint); box-shadow: none; }

.error {
  background: var(--danger-tint);
  border: none;
  color: var(--danger);
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  font-size: .875rem;
}

.success {
  background: var(--success-tint);
  border: none;
  color: var(--success);
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  font-size: .875rem;
}

.warning {
  background: var(--warning-tint);
  border: none;
  color: var(--warning);
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  font-size: .875rem;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}
.top-bar h1 {
  margin: 0;
  font-weight: 500;
  /* Long titles truncate with an ellipsis rather than wrapping to a second line
     or pushing the back arrow off the row (note 43). */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The back arrow (and any other top-bar icon action) keeps its size no matter
   how long the title next to it gets (note 43). */
.top-bar .icon-btn-outline { flex-shrink: 0; }

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  /* Take the remaining row width and allow shrinking, so the title above can
     actually truncate instead of overflowing. */
  flex: 1;
  min-width: 0;
}

.brand-logo { height: 24px; width: auto; display: block; }

.brand-logo-lg { height: 36px; width: auto; display: block; margin: 0 auto 1.25rem; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
  .tool-grid { grid-template-columns: 1fr; }
}

.tool-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow .15s ease, transform .15s ease;
}
.tool-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

.tool-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 1.5rem;
}

.tool-card-text { flex: 1; min-width: 0; }
.tool-card-text h2 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 500; }
.tool-card-text p { margin: 0; font-size: .8125rem; }

.tool-card-arrow { color: var(--muted); flex-shrink: 0; transition: color .15s ease; }
.tool-card:hover .tool-card-arrow { color: var(--primary); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.grid figure {
  margin: 0;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.grid img { width: 100%; height: 140px; object-fit: cover; display: block; }

.grid figcaption {
  padding: .5rem .625rem;
  font-size: .75rem;
  color: var(--muted);
}

form.post-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: .75rem;
}

form.invite-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-top: .75rem;
}

form.post-form label,
form.invite-form label,
form.form-row label {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  font-size: .8125rem;
  color: var(--muted);
}

form.invite-form input[type="email"],
form.invite-form select,
form.post-form input[type="text"],
form.post-form input[type="file"],
form.post-form input[type="datetime-local"],
form.post-form select,
form.post-form textarea,
form.form-row input[type="text"],
form.form-row input[type="datetime-local"],
form.form-row select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .625rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-family: inherit;
}

form.post-form textarea { resize: vertical; }

form.post-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

form.invite-form input[type="email"]:focus,
form.invite-form select:focus,
form.post-form input:focus,
form.post-form select:focus,
form.post-form textarea:focus,
form.form-row input:focus,
form.form-row select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

form.invite-form .checkbox-field {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  font-size: .875rem;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.form-row .grow { flex: 1; min-width: 200px; }

.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  width: fit-content;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  padding: .5rem 1.125rem;
  font-size: .875rem;
  color: var(--text);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.segmented input:checked + label {
  background: var(--primary);
  color: var(--text-inverse);
}

.hint-label {
  display: block;
  font-size: .8125rem;
  color: var(--muted);
}

.chip-select {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .375rem;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .375rem .875rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: .8125rem;
  color: var(--text);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip:has(input:checked) {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary-tint-text);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .75rem;
  font-size: .875rem;
}

table.data-table th,
table.data-table td {
  text-align: left;
  padding: .625rem;
  border-bottom: 1px solid var(--border-light);
}

table.data-table th {
  color: var(--muted);
  font-weight: 500;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Responsive tables (whole-app convention).
   On phones a normal <table> either overflows horizontally or squashes into
   unreadable columns, so below 600px every `table.data-table` collapses into a
   stack of cards: the <thead> is hidden and each row becomes a bordered block
   whose cells stack vertically, each labelled by the column it came from.
   The label text comes from a `data-label` attribute you put on each <td> —
   so when building a new table, give every data cell `data-label="<its header>"`
   (leave it off action-only cells that have a blank header). A cell with no
   data-label just renders its value full width with no label.

   The label sits on its own line ABOVE the value (rather than label-left /
   value-right on one line) so the value area is full-width — long emails and
   cells holding several badges wrap naturally instead of overflowing. */
@media (max-width: 600px) {
  table.data-table,
  table.data-table tbody,
  table.data-table tr,
  table.data-table td {
    display: block;
    width: 100%;
  }

  /* Keep the header for assistive tech but take it out of the visual flow. */
  table.data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  table.data-table tr {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: .375rem .875rem;
    margin-bottom: .75rem;
  }

  table.data-table td {
    padding: .5625rem 0;
    border-bottom: 1px solid var(--border-light);
    word-break: break-word;
  }
  table.data-table tr td:last-child { border-bottom: none; }

  /* The column name, pulled from the cell's data-label, on its own line. */
  table.data-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .3125rem;
    color: var(--muted);
    font-weight: 500;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .3px;
  }
}

.badge {
  display: inline-block;
  background: var(--primary-tint);
  color: var(--primary-tint-text);
  border: none;
  border-radius: 12px;
  padding: .25rem .625rem;
  font-size: .75rem;
  font-weight: 500;
  margin-right: .25rem;
}

.thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-right: .5rem;
}

.row-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  font-size: .8125rem;
}

.row-actions a { color: var(--primary); text-decoration: none; }
.row-actions a:hover { text-decoration: underline; }

.link-danger {
  background: none;
  border: none;
  color: var(--danger);
  font-size: .8125rem;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.link-danger:hover { text-decoration: underline; }

.post-list { padding: .5rem 1.5rem; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .625rem 0 .875rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: .25rem;
}

.search-box,
.select-box {
  display: flex;
  align-items: center;
  gap: .375rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .375rem .875rem;
}

.search-box { flex: 1; min-width: 160px; }

.search-box .material-symbols-outlined,
.select-box .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--muted);
}

.search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-size: .875rem;
  font-family: inherit;
  color: var(--text);
  width: 100%;
}

.select-box select {
  border: none;
  background: transparent;
  outline: none;
  font-size: .8125rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.post-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--border-light);
}
.post-list .post-row:last-child { border-bottom: none; }

.post-main {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.type-icon { color: var(--muted); flex-shrink: 0; }

.post-text {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
}

/* Names and meta lines wrap onto as many lines as they need rather than being
   truncated to one line with an ellipsis. The ellipsis version made long text
   genuinely unreadable — there was no tooltip or detail view to fall back on,
   so a long wishlist item / filename / feature name was simply lost. Rows have
   no fixed height, so they just grow. `overflow-wrap: anywhere` is what saves
   the layout when the text is one unbroken token (a pasted URL, a filename with
   no spaces): without it such a token would push past the flex container
   instead of breaking. */
.post-name {
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.post-name:hover { color: var(--primary); }

.post-sub {
  font-size: .75rem;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: .125rem;
  flex-shrink: 0;
}

/* Narrow-screen post-row behaviour lives at the very end of this file — see
   "Responsive post rows" there. It has to come after the per-tool .post-main
   overrides (.checklist-row etc.) to win on source order. */

.inline-form { display: inline-flex; }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover { background: var(--primary-tint); color: var(--primary); }
.icon-btn.danger:hover { background: var(--danger-tint); color: var(--danger); }

.icon-btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.icon-btn-outline:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }

/* Shared tooltip: any element with [data-tooltip] gets a small dark label on hover. */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: .6875rem;
  font-weight: 400;
  padding: .25rem .5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 10;
}
[data-tooltip]:hover::after { opacity: 1; }

.post-gallery-grid {
  margin: 0 0 .875rem;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.post-gallery-grid img { height: 100px; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: middle;
}

.collapsible {
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows .3s ease, max-height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.collapsible.open {
  opacity: 1;
  margin-top: 1.25rem;
}

/* Generic panels animate open by growing a single grid row to fit their exact
   content — no fixed height cap, so a form can be any length without clipping.
   (An earlier max-height: 700px cap silently cut off tall forms once they grew
   past it, e.g. the calendar event form with a location field + participants.)
   Relies on the panel having one child element, which every generic panel does;
   .todo-detail is the exception and opts out below. */
.collapsible:not(.todo-detail) {
  display: grid;
  /* minmax(0, …) rather than a bare 0fr/1fr: a bare 0fr track keeps a ~12px
     automatic minimum in Chrome, leaving a sliver visible when collapsed.
     Forcing the track minimum to 0 collapses it completely. */
  grid-template-rows: minmax(0, 0fr);
}
.collapsible:not(.todo-detail).open {
  grid-template-rows: minmax(0, 1fr);
}
.collapsible:not(.todo-detail) > * {
  min-height: 0;
  overflow: hidden;
}

.new-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.lightbox img,
.lightbox video {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-sm);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--overlay-btn);
  color: var(--text-inverse);
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--overlay-btn-hover); }

.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

.upload-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--scrim-soft);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.upload-overlay-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 2rem;
  width: min(320px, 90vw);
  text-align: center;
}

.upload-overlay-box #upload-status { margin: 0; font-weight: 500; }

.upload-overlay-box .btn-outline { margin-top: .5rem; }

.spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 1rem;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.progress-track {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
  margin: .75rem 0;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width .15s ease;
}

.secret-body {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: .875rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 1rem;
}

.badge-todo { background: var(--border-light); color: var(--muted); }
.badge-backlog { background: var(--backlog-tint); color: var(--backlog); }
.badge-in_progress { background: var(--primary-tint); color: var(--primary-tint-text); }
.badge-needs_testing { background: var(--warning-tint); color: var(--warning); }
.badge-done { background: var(--success-tint); color: var(--success); }

.todo-detail { padding: .25rem 1.5rem 1.25rem; }
/* The feature detail holds several children (rename form, notes list, add-note
   form) plus tooltips that must escape the panel, so it can't use the single-row
   grid trick the generic panels use. It stays on an uncapped max-height instead —
   never cap it, so every note stays visible however many there are. */
.collapsible.todo-detail {
  max-height: 0;
  overflow: hidden;
}
.collapsible.todo-detail.open {
  max-height: none;
  overflow: visible;
}

.post-desc {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  margin-top: .125rem;
  white-space: normal;
}

.todo-item-list {
  list-style: none;
  margin: .875rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.todo-item-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--text);
  padding: .125rem 0;
}
.todo-item-list li .item-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.todo-item-list li .icon-btn { width: 26px; height: 26px; flex-shrink: 0; }

.item-status-select {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .1875rem .5rem;
  font-size: .75rem;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  cursor: pointer;
}

.item-edit-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: .1875rem .5rem;
  font-size: .8125rem;
  font-family: inherit;
}

.todo-item-form {
  display: flex;
  gap: .375rem;
  margin: .875rem 0 0;
}
.todo-item-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .375rem .625rem;
  font-size: .8125rem;
  font-family: inherit;
}

.todo-status-form select {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .375rem .875rem;
  font-size: .8125rem;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  cursor: pointer;
}

/* On phones a note row (status select + description + edit/remove) is too
   cramped for the description. Lift the status select onto its own line above
   the actions, so the description then shares its line only with the two icon
   buttons and gets noticeably more width. Desktop keeps the single-line row. */
@media (max-width: 600px) {
  .todo-item-list li { flex-wrap: wrap; row-gap: .5rem; }
  .todo-item-list li .item-status-select { flex: 1 0 100%; }
}

.tag {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .6875rem;
  padding: .125rem .5rem;
  border-radius: 10px;
  margin: .25rem .25rem 0 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem;
  margin-top: .75rem;
}

.calendar-weekday {
  font-size: .75rem;
  font-weight: 500;
  text-align: center;
  padding: .25rem 0;
}

.calendar-day {
  min-height: 72px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: .375rem;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  overflow: hidden;
}

.calendar-day-blank { border: none; }

.calendar-day.has-events { background: var(--primary-tint); border-color: var(--primary-tint); }

.calendar-day-num { font-size: .75rem; color: var(--muted); }

.calendar-day-event {
  font-size: .6875rem;
  color: var(--primary-tint-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Checklist tool ---- */

/* Index page: each list is one big clickable row with a progress ring. */
/* Index row: a navigating link (.post-main) plus a favourite star and arrow
   in .post-actions, so the star is clickable without following the link. */
.checklist-row .post-main {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.checklist-row .post-main:hover .post-name { color: var(--primary); }
.checklist-row:hover .tool-card-arrow { color: var(--primary); }

/* Favourite star: hollow + muted by default, gold and filled when active. */
.fav-star .material-symbols-outlined { transition: color .15s ease; }
.fav-star:hover { color: var(--warning); background: var(--warning-tint); }
.fav-star.is-fav .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  color: var(--favourite);
}
.fav-heading-icon {
  font-size: 1.25rem;
  color: var(--favourite);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
}

/* Sharing control (new-list form + settings): stacked radio "cards" so three
   options with long labels never overflow a narrow screen (note 41). */
.sharing-options {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .25rem;
}
.sharing-opt {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: .875rem;
  color: var(--text);
  transition: border-color .15s ease, background-color .15s ease;
}
.sharing-opt .material-symbols-outlined { color: var(--muted); }
.sharing-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sharing-field:has(input[value="private"]:checked) .sharing-opt:has(input[value="private"]),
.sharing-field:has(input[value="selected"]:checked) .sharing-opt:has(input[value="selected"]),
.sharing-field:has(input[value="everyone"]:checked) .sharing-opt:has(input[value="everyone"]) {
  border-color: var(--primary);
  background: var(--primary-tint);
}
.sharing-field:has(input[value="private"]:checked) .sharing-opt:has(input[value="private"]) .material-symbols-outlined,
.sharing-field:has(input[value="selected"]:checked) .sharing-opt:has(input[value="selected"]) .material-symbols-outlined,
.sharing-field:has(input[value="everyone"]:checked) .sharing-opt:has(input[value="everyone"]) .material-symbols-outlined {
  color: var(--primary);
}
/* People picker only shows for the "selected" option. */
.sharing-people { display: none; }
.sharing-field:has(input[value="selected"]:checked) .sharing-people { display: block; }

.progress-ring { flex-shrink: 0; }
.progress-ring circle {
  fill: none;
  stroke-width: 4;
  transform: rotate(-90deg);
  transform-origin: center;
}
.progress-ring .ring-track { stroke: var(--border-light); }
.progress-ring .ring-fill {
  stroke: var(--primary);
  stroke-linecap: round;
  transition: stroke-dashoffset .3s ease;
}
.progress-ring.ring-complete .ring-fill { stroke: var(--success); }
.progress-ring .ring-check {
  fill: none;
  stroke: var(--success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* List page: sticky progress bar that stays visible while scrolling. */
.checklist-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: .5rem 0 .25rem;
  margin-bottom: 1rem;
  background: linear-gradient(var(--bg) 80%, transparent);
}

.checklist-progress {
  display: flex;
  align-items: center;
  gap: .875rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: .875rem 1.125rem;
  transition: background-color .3s ease;
}
.checklist-progress .progress-icon { color: var(--primary); }
.checklist-progress .progress-info { flex: 1; min-width: 0; }
.checklist-progress .progress-text {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  margin-bottom: .375rem;
}
.checklist-progress .progress-track { margin: 0; }
.checklist-progress.complete { background: var(--success-tint); }
.checklist-progress.complete .progress-icon { color: var(--success); }
.checklist-progress.complete .progress-text { color: var(--success); }
.checklist-progress.complete .progress-fill { background: var(--success); }

.checklist-header .checklist-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.checklist-header h1 { overflow-wrap: anywhere; }

.checklist-card { padding: .625rem 1.5rem 1rem; }

/* Item rows: the whole row is one big tap target for a phone in one hand. */
.check-row {
  display: flex;
  align-items: center;
  gap: .25rem;
  border-bottom: 1px solid var(--border-light);
}
.check-items .check-row:last-child { border-bottom: none; }

.check-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .8125rem .25rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.check-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.check-toggle:hover .check-box { border-color: var(--primary); }
.check-toggle:active .check-box { transform: scale(.88); }

.check-box svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--text-inverse);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.check-box polyline {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .2s ease .05s;
}
.check-row.checked .check-box {
  background: var(--primary);
  border-color: var(--primary);
}
.check-row.checked .check-box polyline { stroke-dashoffset: 0; }

.check-text {
  display: flex;
  flex-direction: column;
  gap: .0625rem;
  min-width: 0;
}
.check-name {
  font-size: .9375rem;
  overflow-wrap: anywhere;
  transition: color .15s ease;
}
.check-row.checked .check-name {
  color: var(--muted);
  text-decoration: line-through;
}
.check-by {
  font-size: .75rem;
  display: flex;
  align-items: center;
  gap: .3125rem;
}
.check-by:empty { display: none; }
.by-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--muted);
}

/* Group sections with their own mini-progress; collapsible. */
.group-header {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding-top: .625rem;
  margin-top: .375rem;
  border-top: 1px solid var(--border-light);
}
.check-section:first-child .group-header { border-top: none; margin-top: 0; }

.group-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.group-chevron {
  color: var(--muted);
  transition: transform .2s ease;
}
.check-section.collapsed .group-chevron { transform: rotate(-90deg); }
.check-section.collapsed .check-items,
.check-section.collapsed .quick-add { display: none !important; }

.group-name {
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Per-group "done / total" counter pill, with a green completed state. */
.group-count {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: .125rem .5625rem;
}
.group-done-tick {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--success);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease;
}
.check-section.group-complete .group-count {
  color: var(--success);
  background: var(--success-tint);
  border-color: var(--success-tint);
}
.check-section.group-complete .group-done-tick { opacity: 1; transform: scale(1); }

/* Edit mode: checkboxes step aside, edit controls appear. */
.row-edit-actions {
  display: none;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.row-edit-actions .icon-btn { width: 30px; height: 30px; }
body.editing .row-edit-actions { display: flex; }
body.editing .check-box,
body.editing .check-by { display: none; }
body.editing .check-toggle { cursor: default; }
body:not(.editing) .editing-only { display: none !important; }

/* Drag handles: hidden until edit mode, then a grab affordance on the left.
   touch-action:none lets a touch-drag start without the page scrolling. */
.item-drag-handle,
.group-drag-handle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}
body.editing .item-drag-handle,
body.editing .group-drag-handle { display: inline-flex; }
.item-drag-handle:active,
.group-drag-handle:active { cursor: grabbing; }

/* The element currently being dragged floats under the pointer; a dashed
   placeholder shows where it will land. */
.drag-placeholder {
  border: 2px dashed var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-tint);
  opacity: .5;
  margin: .125rem 0;
  box-sizing: border-box;
}
.check-row.dragging,
.check-section.dragging {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-md);
  opacity: .97;
}
.check-section.dragging { padding: .25rem .75rem; }
body.dragging-active { user-select: none; -webkit-user-select: none; }

.settings-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

.quick-add {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .375rem .25rem .625rem;
  color: var(--muted);
}
.quick-add input {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px dashed var(--border);
  background: transparent;
  padding: .375rem .125rem;
  font-size: .875rem;
  font-family: inherit;
  color: var(--text);
}
.quick-add input:focus {
  outline: none;
  border-bottom: 1px solid var(--primary);
}
/* Add controls grouped at the top of the card: "add item" and "add group"
   side by side, visually distinct so they don't get confused (note 23). */
.add-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  padding-bottom: .5rem;
  margin-bottom: .375rem;
  border-bottom: 1px solid var(--border-light);
}
.add-bar .quick-add { flex: 1; min-width: 200px; padding: .375rem .25rem; }

/* The group-add control gets the accent colour + folder icon so it reads as a
   different action from adding a plain item. */
.add-group-form { color: var(--primary); }
.add-group-form .material-symbols-outlined { color: var(--primary); }
.add-group-form input {
  border-bottom-style: solid;
  border-bottom-color: var(--primary-tint);
}
.add-group-form input::placeholder { color: var(--primary-tint-text); opacity: .85; }

/* Small dot showing a user's identity colour in the admin user table. */
.user-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: .5rem;
  vertical-align: middle;
}

/* Your-account (user) section on the dashboard */
.count-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 .375rem;
  margin-left: .375rem;
  border-radius: 10px;
  background: var(--danger);
  color: var(--text-inverse);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5; /* = 18px at the .75rem font size */
  text-align: center;
  vertical-align: middle;
}

.avatar-settings { margin: .25rem 0 1.25rem; }
.avatar-header {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  flex-wrap: wrap;
}
.user-identity { flex: 1; min-width: 0; cursor: pointer; }
.user-email-sub { font-size: .8125rem; word-break: break-all; }
.name-field {
  display: block;
  font-size: .8125rem;
  color: var(--muted);
  margin-bottom: .25rem;
}
.name-field input {
  display: block;
  width: 100%;
  margin-top: .375rem;
  padding: .5rem .625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
}
.name-field input:focus { outline: none; border-color: var(--primary); }
.lang-form { margin-left: auto; }
.lang-select { padding-top: .25rem; padding-bottom: .25rem; }
.avatar-preview {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  padding: 0;
  color: var(--text-inverse);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-1);
  user-select: none;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.avatar-preview:hover { box-shadow: var(--shadow-2); }
.avatar-initials { line-height: 1; }
.avatar-edit {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-hover);
  color: var(--text-inverse);
  font-size: 1.375rem;
  opacity: 0;
  transition: opacity .15s ease;
}
.avatar-preview:hover .avatar-edit,
.avatar-preview:focus-visible .avatar-edit { opacity: 1; }
.user-email {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
  word-break: break-all;
}
.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0 .375rem;
}
.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform .1s ease, box-shadow .15s ease;
  outline: none;
}
.swatch:hover { transform: scale(1.12); }
.swatch.selected {
  border-color: var(--surface);
  box-shadow: 0 0 0 2px var(--text);
}
.swatch-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  color: var(--muted);
  overflow: hidden;
}
.swatch-custom:hover { border-color: var(--primary); color: var(--primary); }
.swatch-custom .material-symbols-outlined { font-size: 1rem; }
.swatch-custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 0;
  border: none;
  cursor: pointer;
}
.user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: .5rem;
}
.user-actions .inline-form { margin: 0; }

/* Small colour dot marking a user in the fileshare "only visible to" chips */
.chip-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: .375rem;
  border: 1px solid var(--dot-outline);
  flex-shrink: 0;
}

/* Resolved/done rows in the admin reports & requests view */
.post-row.item-done .post-name { text-decoration: line-through; }
.post-row.item-done { opacity: .6; }

/* ---- Checklist offline mode (note 50) ---- */

/* Floating connectivity pill: "you're offline" / "syncing" / "saved".
   Injected by checklist-offline.js; shown/hidden via the .show class. */
.offline-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 90px);
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: calc(100vw - 32px);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: .8125rem;
  padding: .625rem 1.125rem;
  border-radius: 24px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  z-index: 500;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.offline-banner.show { transform: translate(-50%, 0); opacity: 1; }
.offline-banner .material-symbols-outlined { font-size: 1.125rem; flex-shrink: 0; }

/* Items added while offline: visibly provisional until they reach the server.
   Their edit controls stay hidden — rename/delete/reorder need the real id. */
.check-row.pending-item {
  opacity: .8;
  border-left: 3px dotted var(--warning);
  padding-left: .5rem;
}
.check-row.pending-item .row-edit-actions,
.check-row.pending-item .item-drag-handle { display: none !important; }

/* Note 42: on phones, trim the generous horizontal paddings so content gets
   more of the narrow screen width. Covers the page wrapper plus every card /
   section variant that carries its own wider horizontal padding. The variant
   rules come after `.card` so they win for `.card.post-list` etc. */
@media (max-width: 600px) {
  .wrap { padding: 1.5rem .75rem; }
  .card { padding: 1.25rem 1rem; }
  .post-list { padding: .375rem 1rem; }
  .checklist-card { padding: .625rem 1rem 1rem; }
  .todo-detail { padding: .25rem 1rem 1.25rem; }
}

/* ============================ Surveys ============================ */
body:not(.editing) .not-editing-only { display: block; }
body.editing .not-editing-only { display: none !important; }

.badge-open { background: var(--success-tint); color: var(--success); }

.survey-row-icon { color: var(--primary); }

/* Create/settings toggles (custom answers, multistep, show results) */
.survey-toggles { margin-top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  cursor: pointer;
}
.toggle-row input { margin-top: .2rem; }
.toggle-row .toggle-title { font-weight: 500; font-size: .9rem; }

.survey-owner-bar { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.survey-owner-bar .btn { display: inline-flex; align-items: center; gap: .375rem; }

.public-link-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}
.public-link-row { display: flex; gap: .5rem; margin-top: .5rem; }
.public-link-row input {
  flex: 1;
  min-width: 0;
  padding: .5rem .625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .8rem;
  background: var(--bg);
  color: var(--text);
}

.q-type-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--border-light);
  border-radius: 10px;
  padding: .1rem .5rem;
  margin-left: .375rem;
  vertical-align: middle;
}

/* ---- Editor ---- */
.survey-edit-section { margin-bottom: .5rem; }
.survey-edit-question {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: .75rem .875rem;
  margin: .625rem 0;
  background: var(--surface);
}
.seq-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.seq-q-text { display: flex; flex-direction: column; gap: .2rem; }
.seq-q-text .q-text { font-weight: 500; }
.seq-options { margin: .5rem 0 0 .25rem; padding-left: .5rem; border-left: 2px solid var(--border-light); }
.seq-option { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.seq-option .opt-text { flex: 1; font-size: .9rem; }
.seq-opt-icon { color: var(--muted); font-size: 20px; }
.seq-add-option { padding: .25rem 0 .125rem; }
.survey-add-question { align-items: center; }
.survey-add-question .q-type-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .3rem .4rem;
  font-family: inherit;
  font-size: .8rem;
  background: var(--surface);
  color: var(--text);
}

/* ---- Take form ---- */
.survey-take { display: flex; flex-direction: column; gap: 1rem; }
.survey-step-title { font-size: 1.05rem; margin: .25rem 0 .5rem; }
.survey-q {
  border: none;
  border-top: 1px solid var(--border-light);
  padding: 1rem 0 .25rem;
  margin: 0;
}
.survey-q:first-child { border-top: none; }
.survey-q legend { font-weight: 500; padding: 0; margin-bottom: .5rem; }
.req-star { color: var(--danger); }
.survey-opt-choice {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: .375rem;
  cursor: pointer;
}
.survey-opt-choice:hover { background: var(--bg); }
.survey-opt-choice input[type="text"] {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: .9rem;
  color: var(--text);
}
.survey-opt-choice input[type="text"]:focus { outline: none; }
.survey-custom { color: var(--muted); }
.survey-take-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }

/* ---- Results ---- */
.survey-results h2 { margin-bottom: .75rem; }
.result-q {
  border-top: 1px solid var(--border-light);
  padding: .875rem 0;
}
.result-q:first-of-type { border-top: none; }
.result-q-text { font-weight: 500; margin-bottom: .625rem; }
.result-bar-row { margin-bottom: .625rem; }
.result-bar-row.mine .result-bar-label { color: var(--primary-tint-text); font-weight: 500; }
.result-bar-label {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .875rem;
  margin-bottom: .25rem;
}
.result-bar-count { color: var(--muted); white-space: nowrap; }
.result-track {
  height: 8px;
  background: var(--border-light);
  border-radius: 6px;
  overflow: hidden;
}
.result-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 6px;
  transition: width .3s ease;
}
.result-bar-row.mine .result-fill { background: var(--primary-tint-text); }
.mine-check { font-size: 16px; vertical-align: -3px; color: var(--primary); }
.custom-tag {
  font-size: .7rem;
  color: var(--backlog);
  background: var(--backlog-tint);
  border-radius: 8px;
  padding: .05rem .4rem;
}
.survey-thanks { text-align: center; padding: 1.75rem 1rem; }
.survey-thanks p { margin: .5rem 0 0; }

/* ---- Survey editor: composer + pages (v30) ---- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 1rem 0 .5rem;
  padding: .5rem .625rem;
  background: var(--primary-tint);
  border-radius: var(--radius-sm);
}
.survey-edit-section:first-child .page-header { margin-top: 0; }
.page-title {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 500;
  color: var(--primary-tint-text);
}
.page-title .material-symbols-outlined { font-size: 20px; }
.page-empty { padding: .25rem .25rem .75rem; }
.add-page-btn { display: inline-flex; align-items: center; gap: .375rem; margin: .25rem 0 1rem; }

.q-composer { margin-top: 1rem; border-top: 1px solid var(--border-light); padding-top: 1rem; }
.q-composer-open { display: inline-flex; align-items: center; gap: .375rem; }
.q-composer-body {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: var(--bg);
}
.q-composer-text {
  width: 100%;
  box-sizing: border-box;
  padding: .625rem .75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  margin-bottom: .75rem;
}
.q-composer-text:focus { outline: none; border-color: var(--primary); }

.q-type-seg { display: inline-flex; gap: .375rem; margin-bottom: .875rem; flex-wrap: wrap; }
.seg-opt {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .85rem;
  cursor: pointer;
  background: var(--surface);
  color: var(--muted);
  position: relative;
}
.seg-opt .material-symbols-outlined { font-size: 18px; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary-tint-text);
  font-weight: 500;
}

.q-composer-options { display: flex; flex-direction: column; gap: .375rem; margin-bottom: .5rem; }
.composer-opt-row { display: flex; align-items: center; gap: .5rem; }
.composer-opt-row .seq-opt-icon { color: var(--muted); font-size: 20px; }
.composer-opt-input {
  flex: 1;
  min-width: 0;
  padding: .4rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .9rem;
  background: var(--surface);
  color: var(--text);
}
.composer-opt-input:focus { outline: none; border-color: var(--primary); }

.btn-textlink {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: none;
  border: none;
  color: var(--primary);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  padding: .25rem 0;
}
.btn-textlink .material-symbols-outlined { font-size: 18px; }

.composer-footer {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: .875rem 0;
}
.composer-required { display: inline-flex; align-items: center; gap: .375rem; font-size: .9rem; cursor: pointer; }
.composer-page { display: inline-flex; align-items: center; gap: .375rem; font-size: .9rem; }
.composer-page select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .3rem .4rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

/* ---- Survey editor v31: drag handles, cards, required badge ---- */
.survey-edit-question {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
}
.survey-edit-question .seq-main { flex: 1; min-width: 0; }
.survey-edit-question > .item-drag-handle { margin-top: 2px; }
.seq-list { min-height: 8px; }

.q-tags { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin-bottom: .15rem; }
.req-badge {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-size: .7rem;
  font-weight: 500;
  color: var(--warning);
  background: var(--warning-tint);
  border-radius: 10px;
  padding: .1rem .45rem;
}
.req-badge .material-symbols-outlined { font-size: 14px; }
.row-edit-actions.always-on { display: flex; }

.composer-title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 500; }
.composer-opt-row .item-drag-handle { flex-shrink: 0; }

/* Let survey editor elements use the shared drag visuals */
.survey-edit-question.dragging,
.survey-edit-section.dragging,
.composer-opt-row.dragging {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-md);
  opacity: .97;
}
.survey-edit-section.dragging { padding: .25rem .75rem; }

/* ==================== Responsive post rows ==================== */

/* Must stay at the end of the file: it overrides the per-tool .post-main rules
   above (.checklist-row .post-main sets min-width: 0), and wins on source order
   rather than by inflating selector specificity.

   On a phone .post-actions never shrinks, so a row with a wide control — the
   wishlist's "I'll buy this" button, or fileshare's row of icon buttons —
   squeezed the name column down to ~120px, turning a long name into a tall
   narrow tower of text. Giving .post-main a minimum width and letting the row
   wrap drops the actions onto their own right-aligned line instead, but only
   when they genuinely don't fit: rows with light actions (the checklist/survey
   index, just a star and an arrow) still fit beside the minimum and keep the
   arrow inline as before. Available space decides, so no per-tool selectors. */
@media (max-width: 600px) {
  .post-row { flex-wrap: wrap; }

  /* flex-basis must be 0, not auto: with `auto` the flex line-breaking uses the
     text's max-content width, so a long name would force the actions onto their
     own line even when they'd comfortably fit. Basing the hypothetical size on 0
     clamped by min-width means the 15rem minimum is what decides whether the
     actions still fit beside the text. */
  .post-main,
  .checklist-row .post-main {
    flex: 1 1 0;
    min-width: min(100%, 15rem);
  }

  .post-actions { margin-left: auto; }
}