/* Inter — shared with the parent mrgan.com site (site/styles/fonts/inter).
   Path is relative to this file (source/check/css/) → source/styles/fonts. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../styles/fonts/inter/Inter-VariableFont_opsz,wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../styles/fonts/inter/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
}

:root {
  --c-bg-page:      #acb1b5;
  --c-bg-card:      #ffffff;
  --c-ink:          #000000;
  --c-ink-dim:      #6b747d;
  --c-ink-dimmer:   #aeb4b9; /* fainter than dim — keeps hierarchy when dimmed text is dimmed again */
  --c-disabled-bg:  #dddddd;
  
  --c-disabled-ink: var(--c-ink-dim);
  --c-ink-secondary: #ffffff;

  /* Type */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-base:   1em;
  --lh-base:   1.4;

  /* Spacing & sizing */
  --content-width: 640px;
  --page-pad-x:    clamp(1.25rem, 4vw, 2.5rem);
  --gap:           1rem;
  --card-radius:   .75rem;
  --control-radius:.2rem;
  --card-height:   9rem; /* home-page list cards — fixed for an even grid */

  /* Checkbox geometry */
  --box-size:    16px;
  --box-offset:  27px; /* how far left of the label the box sits */
  --stroke: 2px;
}

@media (prefers-color-scheme: dark)
{
  :root {
    /* Palette (from the original site) */
    --c-bg-page:      #000000;
    --c-bg-card:      #373c42;
    --c-ink:          #ffffff;
    --c-ink-dim:      #818b95;
    --c-ink-dimmer:   #5f6870; /* fainter than dim, toward the card background */
    --c-disabled-bg:  #343638;
    
    --c-disabled-ink: var(--c-ink-dim);
    --c-ink-secondary: #6b747d;
  }
}

/* ------------------------------------------------------------------ Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg-page);
  padding: 0 var(--page-pad-x);
}

p
{
  margin: 1em 0;
}

img { max-width: 100%; border: 0; }

b, strong { font-weight: 700; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: .1em solid var(--c-ink-dim);
}
a:hover { border-bottom-color: rgba(0, 0, 0, .8); }

/* ------------------------------------------------------------ Layout rails */

.wrap {
  max-width: var(--content-width);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- Header */

.site-header {
  margin-inline: calc(-1 * var(--page-pad-x));
  padding: 1.5rem var(--page-pad-x) .5rem;
}

/* Make the header's wrap a query container so the wordmark can respond to the
   wrap's own rendered width, breaking before it would spill past it. */
.site-header .wrap { container-type: inline-size; }

.brand {
  display: grid;
  width: fit-content;
  grid-template-columns: 1fr 1fr 2fr;
  align-items: end;
  white-space: nowrap;
  column-gap: .3rem;
  
  font-size: 3em;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
  border-bottom: 0;
}
/* List pages reuse the wordmark but drop the word cloud. Lay it out with
   flex-wrap instead of the grid: the tagline sits beside "check!" when it fits
   and drops to its own line — wrapping further if still too long — for any
   tagline length. Intrinsic, so it never overflows the wrap and needs no width
   threshold. (`width: fit-content` from .brand caps it at the wrap width.) */
.brand-list {
  display: flex;
  flex-wrap: wrap;
  white-space: normal;
}

.brand i {
  font-style: normal;
  display: inline-block;
  transform: rotate(10deg);
  margin-left: .13rem;
}
.brand .tagline {
  color: var(--c-ink-secondary);
}

.brand ul
{
  display: grid;
  position: relative;
  width: fit-content;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;  
  row-gap: .1rem;
  justify-items: center;
  
  list-style-type: none;
  margin: 0;
  top: -.2rem;
  padding: 0;
}
  .brand ul li
  {
    color: var(--c-ink-secondary);
    font-size: .3em;
    line-height: 1.1em;
    letter-spacing: 0;
  }
  .brand ul li:nth-child(1) { transform: rotate(3deg); }
  .brand ul li:nth-child(2) { transform: rotate(-2deg); }
  .brand ul li:nth-child(3) { transform: rotate(1deg); }
  .brand ul li:nth-child(4) { transform: rotate(-1deg); }
  .brand ul li:nth-child(5) { transform: rotate(-1.5deg); }
  .brand ul li:nth-child(6) { transform: rotate(2deg); }



/* Per-list intro block */
.list-intro {
  margin-top: 1.5rem;
}
.list-intro p {
  margin-top: .75em;
}

/* ---------------------------------------------------------------- Lists */

/* The <main> element does double duty: `.list-main` shows a single checklist
   (on a white card), `.home-main` holds the grid of list cards (no wrapper). */
.list-main
{
    padding: 1.5rem 2rem;
    background: var(--c-bg-card);
    border-radius: var(--card-radius);
}

.home-main { display: contents; }

.section { margin-bottom: 2rem; }

.section h2 {
  font-size: 1.5em;
  line-height: 1;
  font-weight: 700;
  margin-bottom: .5em;
}

.items { list-style: none; }

.item {
  position: relative;
  padding: .25em 0 .25em var(--box-offset);
  border-radius: .25em;
  transition: all .2s ease;
}

/* Visually-hidden native checkbox */
.item input[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.item label {
  display: block;
  position: relative;
  cursor: pointer;
  white-space: pre-line; /* honor line breaks in multi-line task text */
}

.item-detail { color: var(--c-ink-dim); }
/* A checked item goes dim; its secondary lines go one notch dimmer, so the
   whole item fades but keeps its first-line-vs-detail hierarchy. Unchecked
   items show every line in full ink. */
.item.checked .item-detail { color: var(--c-ink-dimmer); }

.item-detail a
{
  border-bottom-color: var(--c-ink-dimmer);
}

/* Checkbox */
.item label::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--box-offset));
  top: 3px;
  width: var(--box-size);
  height: var(--box-size);

  border-radius: var(--control-radius);
  border: var(--stroke) solid var(--c-ink-dim);
  background: var(--c-bg-card);
}
/* Checkmark */
.item label::after {
  content: '';
  mask-image: url('../assets/check.svg');
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
  background-color: var(--c-ink);
  width: 18px;
  height: 18px;
  position: absolute;
  left: calc(-1 * var(--box-offset) + 3px);
  top: -2px;
  opacity: 0;
  transform: scale(0);
  transition: opacity .1s, transform .1s;
}

/* .item input:active + label::before { background: var(--c-box-active); } */
.item input:checked + label { color: var(--c-ink-dim); }
.item input:checked + label::after { opacity: 1; transform: scale(1); }

.item input:focus-visible + label::before {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}

/* ------------------------------------------------- Check / uncheck all */

/* Suppress the iOS long-press text-callout so long-press can open our dialog.
   (Reading mode only — editing labels stay fully selectable.) */
.list-main:not(.editing) .item {
  -webkit-touch-callout: none;
}
/* Hint that Alt-click will act on the whole list. */
body.alt-held .list-main:not(.editing) .item { cursor: pointer; }

/* Floating tooltip shown while Alt is held (positioned in JS). */
.alt-tip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--c-ink);
  color: var(--c-bg-card);
  font-size: .8rem;
  padding: .25em .5em;
  border-radius: var(--control-radius);
  white-space: nowrap;
}

/* Long-press dialog (touch). */
.bulk-dialog {
  margin: auto; /* re-enable native modal centering (the * reset zeroes margin) */
  border: 0;
  border-radius: var(--card-radius);
  padding: 1.25rem 1.5rem;
  max-width: 20rem;
  background: var(--c-bg-card);
  color: var(--c-ink);
}
.bulk-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.bulk-btn {
  padding: .4em .8em;
  border: 1px solid var(--c-ink-dim);
}

/* Completion celebration dialog (shown when a list hits 100%). */
.done-dialog {
  margin: auto; /* re-enable native modal centering (the * reset zeroes margin) */
  border: 0;
  border-radius: var(--card-radius);
  padding: 1.5rem 1.75rem;
  max-width: 22rem;
  background: var(--c-bg-card);
  color: var(--c-ink);
  /* text-align: center; */
}
.done-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.done-title
{
  margin: 0 0 .5em 0;
  font-size: 1.5rem;
  font-weight: 700;
}
  .done-title
.done-msg { margin: .5rem 0 0; }
.done-actions {
  /* display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-content: start;
  gap: .5rem; */
  margin-top: 1.5rem;
}
.done-actions a
{
  display: block;  
  margin: .5rem 0;
  width: fit-content;
}

/* ----------------------------------------------------------------- Buttons */

/* One base for every <button>: a bare reset + the shared focus ring. The
   variants below add only what differs. */
.btn {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: var(--control-radius);
  cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* Edit-mode toggle: text button floated top-right, so a long first section
   heading wraps around it instead of under. */
.edit-toggle {
  float: right;
  margin-left: 1rem;
  color: var(--c-ink-dim);
}
.edit-toggle:hover,
.edit-toggle[aria-pressed="true"] { color: var(--c-ink); }

.editing .edit-toggle
{
  
}

/* Small × remove button and the "Restore" text button in the Deleted panel. */
.icon-btn { color: var(--c-ink-dim); line-height: 1; }
.restore-link { color: var(--c-ink); font-weight: 700; padding: .2em .5em; }

/* --------------------------------------------------------------- Editing */

/* Inline-editable text (item labels, section titles) */
.editable {
  border-bottom: 1px solid transparent;
}

.editable:focus {
  /* outline: 2px solid var(--c-ink); */
  /* outline-offset: 1px; */
  border-bottom-color: var(--c-ink-dim);
  outline: none;
}
.section-title { display: inline-block; }

/* Make room on the right of each item for its drag handle + remove button. */
.editing .item { padding-right: 3.4rem; }

/* Labels are text-edited while editing, not clicked to check off. */
.editing .item label { cursor: text; }

.remove
{
  font-weight: normal;
}

.item .remove {
  position: absolute;
  right: 1.6rem;
  top: .1em;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.25em;
}

/* Drag handle (edit mode) sits at the far right; drag reorders the item. */
.drag-handle {
  position: absolute;
  right: 0;
  top: .1em;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-dim);
  cursor: grab;
  touch-action: none; /* claim the touch so dragging doesn't scroll the page */
  user-select: none;
}
.drag-handle:active { cursor: grabbing; }

.item.dragging
{
  transform: scale(1.03); 
  box-shadow: 0 .1em .3em #00000088;
}
.dragging-active { user-select: none; cursor: grabbing; }
.section h2 .remove {
  font-size: .8em;
  width: 1.4rem;
  height: 1.4rem;
  vertical-align: middle;
  margin-left: .35em;
}

/* Add-item / add-section rows */
.add-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .5rem;
}
.editing .add-row { margin-left: var(--box-offset); } /* align with item text */
.editing .add-section { margin-left: 0; margin-top: 1.5rem; }

.add-input {
  font: inherit;
  line-height: inherit;
  flex: 1;
  min-width: 0;
  padding: .5em 0;
  border: none;
  border-bottom: 1px solid var(--c-ink-dim);
  /* textarea: single row by default, grows via JS, no manual drag handle */
  resize: none;
  overflow: hidden;
}
.add-input:focus-visible { outline: none; }

/* Restore-template button is only relevant while editing. */
.toolbar [data-action="restore"] { display: none; }
body.editing .toolbar [data-action="restore"] { display: inline-block; }

/* Deleted items / sections (shown in edit mode) */
.deleted {
  margin-top: 2.5rem;
  color: var(--c-ink-dim);
}
.deleted summary {
  cursor: pointer;
  font-weight: 700;
}
.deleted-list {
  list-style: none;
  margin-top: .75rem;
  display: grid;
  gap: .4rem;
}
.deleted-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.deleted-text {
  flex: 1;
  min-width: 0;
  text-decoration: line-through;
  white-space: pre-line;
}
.deleted-tag {
  font-size: .75em;
  background: var(--c-bg-card);
  color: var(--c-ink);
  border-radius: var(--control-radius);
  padding: .1em .5em;
  white-space: nowrap;
}
/* -------------------------------------------------------- Footer notes/tips */

/* Semantic list of applicable notes + links, rendered as running inline
   sentences (one space between each). */
.notes {
  list-style: none;
  margin: 1em 0;
  /* color: var(--c-ink-dim); */
}
.notes li { display: inline; }
.notes li + li::before { content: " "; }

/* ---------------------------------------------------------------- Footer */

.site-footer {
  padding: .5rem 0 2.5rem;
}
p.signature
{
  text-indent: -99999px;
  color: transparent;
  height: 2em;
  margin-top: 2em;
  background: var(--c-ink);
  mask: url('../assets/signature.png') right top no-repeat;
  mask-size: contain;
}

/* ---------------------------------------------------------------- Home */

.home-lists {
  list-style: none;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-block: 2rem;
}
.home-card {
  display: flex;
  flex-direction: column;
  height: var(--card-height);
  overflow: hidden; /* fixed height; overlong text is clipped — rewrite to fit */
  border: 0;
  padding: 1.1rem 1.25rem;
  background: var(--c-bg-card);
  border-radius: 8px;
}
.home-card h2 { font-size: 1.25em; line-height: 1.1; }
.home-card p { margin-top: .4em; font-size: .95em; }

/* --------------------------------------------------- Responsive niceties */

@media (min-width: 768px) {
  .site-header { padding-top: 2rem; }
}

/* The home wordmark keeps its fixed grid (word-cloud column), so it can't wrap
   intrinsically like the list one — stack it onto two rows once the wrap can no
   longer show it at full width. The query watches the WRAP's own width (it's
   the container), so the break lands exactly when the wrap can't fit the brand
   at --content-width (640px) — no viewport/padding math. */
@container (width < 640px) {
  .brand:not(.brand-list) {
    grid-template-columns: auto auto;
    white-space: normal;
  }
  .brand:not(.brand-list) > span:first-child {
    grid-column: 1 / -1; /* "check!" spans its own row */
  }
}