/* Home: a desktop of PinPin stickies. Values follow the Paper boards "Sticky Home — 1440 light / 1440 dark / 390 light"
   and "Sticky Home — interaction states" (page "Phase 3 — Website & Brand"). Loaded after styles.css, on the home page only:
   the scatter layout, editing, drag, the stickies' glass buttons and the toast. */

.home {
  --shadow-lift: 0 0 0 0.5px #00000014, 0 4px 10px #0000001A, 0 28px 56px -10px #00000040;
  --toast: #FFFFFFB3;
  --toast-shadow: inset 0 0.5px 0 #FFFFFFE6, 0 0 0 0.5px #0000001A, 0 2px 6px #0000000F, 0 12px 30px #00000024;
}

@media (prefers-color-scheme: dark) {
  .home {
    /* Not drawn in Paper (the states board is light): the light lift applied to the dark shadow. */
    --shadow-lift: inset 0 0 0 0.5px rgb(255 255 255 / 10%), 0 0 0 0.5px #0000008C, 0 4px 10px #00000066, 0 28px 56px -10px #000000B3;
    --toast: rgb(48 48 50 / 94%);
    --toast-shadow: inset 0 0 0 0.5px #FFFFFF1F, 0 2px 6px #00000066, 0 12px 30px #00000080;
  }
}

.home code { font-size: 12px; }

.note { caret-color: var(--label); }
/* The caret and the glass buttons are the focus cue while typing, as in the app. */
.note [contenteditable]:focus-visible { outline: none; }

.note-hero h1 { margin: 0; font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.03em; }
.note-hero .subhead { padding-top: 12px; font-size: 17px; line-height: 25px; letter-spacing: -0.022em; }
.cta-row { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 20px; }

.agent-tag { display: flex; align-self: center; align-items: center; gap: 3px; color: var(--label-2); font-size: 11px; font-weight: 500; line-height: 14px; letter-spacing: 0.005em; }
.agent-tag svg { fill: currentColor; }
/* The agent-ticked row: a third column holds the "Done by Claude" tag on the same line, and the row is
   washed with the sticky's accent at 14%. */
.todo-agent { grid-template-columns: 16px 1fr auto; isolation: isolate; }
.todo-agent::before {
  content: "";
  position: absolute;
  inset: -3px -6px;
  z-index: -1;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.note-new { min-height: 176px; }
.note-new p { min-height: 18px; color: var(--label); }

/* Glass buttons, added by home.js. Hidden until hover or focus; pointer-events keep an invisible × from being tapped. */
.note-bar {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 5px;
  opacity: 0;
  pointer-events: none;
}
.note:hover .note-bar, .note:focus-within .note-bar { opacity: 1; pointer-events: auto; }
.glass-group { padding: 0 2px; }
/* The glass is 22px tall; the buttons are 28px so every hit target is at least 24px (WCAG 2.5.8). */
.note-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.note-bar [data-action="close"] { width: 28px; margin-left: -3px; border-radius: 14px; }
.note-bar [data-action="close"] .glass { width: 22px; }
.glass-group button { width: 24px; margin: -3px 0; }
.note-bar svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.note-bar .glyph-link { stroke-width: 2.6; }
.note-bar button:focus-visible { outline-offset: 0; }

.toast {
  position: fixed;
  top: 28px;
  left: 50%;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--toast);
  box-shadow: var(--toast-shadow);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  color: var(--label);
  font-size: 13px;
  line-height: 18px;
  translate: -50% 0;
  opacity: 0;
  pointer-events: none;
}
.toast.is-shown { opacity: 1; }

/* Touch or narrow: one column in reading order (Paper "Sticky Home — 390 light"), no drag. */
.desk { display: flex; flex-direction: column; gap: 16px; }
.desk-row, .desk-col { display: contents; }
.note-hero { padding: 32px 16px 20px; gap: 0; }

/* The complement of the desktop query: drag offsets from a wider window don't apply to the stack. */
@media (hover: none), (pointer: coarse), (max-width: 899px) {
  .note { translate: none !important; }
  .cta-row .cta { align-self: stretch; height: 50px; border-radius: 25px; }
}

/* Desktop: the stickies lie where Paper "Sticky Home — 1440" puts them, and can be dragged.
   Keep this query in sync with DESKTOP in home.js. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .br-stack { display: none; }

  /* Cluster x 120–1308 at 1440: 1188 wide, centred on 600px left of the middle. */
  .desk { display: block; position: relative; width: min(1188px, 100% - 80px); max-width: none; margin: 60px 0 0 max(40px, 50% - 600px); padding-bottom: 56px; }
  .desk-row-top { display: flex; align-items: flex-start; gap: 32px; }
  /* At 1440 the free 408px splits 56/80/272, which puts blue, green and purple at Paper's x. */
  .desk-row-bottom { display: grid; grid-template-columns: minmax(0, 56fr) 260px minmax(16px, 80fr) 260px minmax(16px, 272fr) 260px; align-items: start; margin-top: 32px; }
  .desk-col { display: flex; flex-direction: column; gap: 24px; grid-column: 6; }
  .note { width: 260px; }
  .note-hero { flex: 0 1 760px; width: auto; min-width: 0; padding: 36px 40px 40px; }
  .note-hero h1 { font-size: 60px; line-height: 64px; letter-spacing: -0.032em; }
  .note-hero .subhead { padding-top: 16px; font-size: 19px; line-height: 28px; letter-spacing: -0.012em; }
  .cta-row { flex-direction: row; gap: 20px; padding-top: 28px; }
  .note-today { flex: none; width: 328px; min-height: 212px; margin-top: 28px; }
  .note-blue { grid-column: 2; min-height: 176px; margin-top: 88px; }
  .note-green { grid-column: 4; min-height: 176px; margin-top: 56px; }
  .note-purple { min-height: 200px; }
  .pill-connect { width: 260px; }
  /* Placed by home.js; drops the grid margins its colour's original sticky has. */
  .note-new { position: absolute; margin: 0; }

  /* With a mouse the bar is only reachable while its sticky is hovered, so it always takes pointer events:
     drag must not depend on :hover, which Chrome was seen leaving stale on an old element after a reload. */
  .note-bar { cursor: grab; touch-action: none; pointer-events: auto; }
  .note.is-dragging { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
  .note.is-dragging .note-bar { cursor: grabbing; }
}

/* Under 1200px the hero shares the row with "Today" at less than 760px wide (760 + 32 + 328 + 80 margin). */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) and (max-width: 1199px) {
  .note-hero h1 { font-size: 48px; line-height: 52px; letter-spacing: -0.03em; }
}

@media (prefers-reduced-motion: no-preference) {
  .note-bar, .toast { transition: opacity 0.12s; }
  .note { transition: transform 0.12s, box-shadow 0.12s; }
}