/* ============================================================
   SCRATCH — paper, not machine.

   The one light surface in the product, and that is deliberate:
   the change of material tells you which mode you are in before
   you read anything. Everything here is hand-sized, because the
   whole screen is a touch target.
   ============================================================ */

/* height:100dvh, not inset:0. A fixed element sized to the *large* viewport
   puts its bottom strip under the Android browser chrome — which is exactly
   where the exit button lives, so on a phone there was no way out. #app already
   uses dvh for the same reason; this must match it. */
#scratch{
  position:fixed;left:0;top:0;z-index:60;
  width:100%;height:100vh;height:100dvh;height:var(--sc-h,100dvh);
  background:#fbfaf7;color:#17171b;
  transform:translateX(-100%);
  transition:transform 330ms var(--spring);
  overscroll-behavior:none;overflow:hidden;
}
body.scratch-open #scratch{transform:none}

/* the desk slides out of the way as the paper comes in */
#app,#tabs{transition:transform 330ms var(--spring)}
body.scratch-open #app{transform:translateX(100%)}
body.scratch-open #tabs{transform:translateX(calc(-50% + 100vw))}
/* while a thumb is actually on it, the transform is the thumb's job */
body.scratch-dragging #app,
body.scratch-dragging #tabs,
body.scratch-dragging #scratch{transition:none}

/* The gesture only survives on a phone if the browser is told it may
   keep the vertical axis and nothing else. Without this it claims any
   drag starting on a scrolling list, fires pointercancel, and the swipe
   dies halfway across. */
.pane[data-pane="do"]{touch-action:pan-y}

/* ---------- the paper ---------- */
.sc-surface{
  position:absolute;inset:0;overflow:hidden;
  touch-action:none;-webkit-tap-highlight-color:transparent;
  /* a long press on a phone starts a text selection, and the selection
     cancels the pointer gesture — which is what killed hold-to-draw */
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  /* the starting look; applyView() rewrites both of these on every frame so
     the dot grows with the zoom and stays locked to the world coordinates */
  background-image:radial-gradient(circle at 1.15px 1.15px, rgba(18,18,24,.22) 1.15px, transparent 0);
  background-size:26px 26px;
}
/* transform-origin MUST stay at the origin. The whole coordinate model is
   screen = world * zoom + pan, which is only true if scale() grows from the
   top-left corner. With the default 50% 50% everything is correct at zoom 1
   and quietly wrong at every other zoom: the wire under your thumb lands
   somewhere else, the lasso catches the wrong bubbles, and the paper feels
   like the camera is pointing somewhere you are not. */
.sc-world{position:absolute;inset:0;transform-origin:0 0}
.sc-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

/* ---------- wires ---------- */
.sc-wire{stroke:rgba(23,23,27,.32);stroke-width:1.7;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.sc-wire.flow{stroke:var(--accent);stroke-width:2.1}
/* selection thickens a wire — it must not recolour one, or a directed
   wire would stop reading as directed the moment you touched it */
.sc-wire.on{stroke-width:3.2}
.sc-wire.on:not(.flow){stroke:rgba(23,23,27,.55)}
.sc-live{stroke:var(--accent);stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
/* a fat invisible line so a thumb can find a 2px wire */
.sc-hit{stroke:transparent;stroke-width:30;pointer-events:stroke;cursor:pointer;
  vector-effect:non-scaling-stroke}
#sc-arrow path{fill:var(--accent)}

.sc-kill{pointer-events:all;cursor:pointer}
.sc-kill circle{fill:#17171b}
.sc-kill path{stroke:#fbfaf7;stroke-width:2;stroke-linecap:round}

/* ---------- bubbles ---------- */
.sc-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:baseline;
  width:max-content;max-width:190px;padding:10px 15px;border-radius:16px;
  background:#fff;border:1.5px solid rgba(23,23,27,.16);
  box-shadow:0 2px 10px -4px rgba(20,20,28,.28);
  font-size:14.5px;line-height:1.35;color:#17171b;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:box-shadow 160ms var(--swift),border-color 160ms var(--swift),
             transform 160ms var(--spring);
}
.sc-node.on{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(226,96,58,.16), 0 4px 14px -5px rgba(20,20,28,.32);
}
/* waiting on something else: still there, plainly not next */
.sc-node.blocked{
  background:#f6f5f1;border-style:dashed;border-color:rgba(23,23,27,.22);
  color:rgba(23,23,27,.52);box-shadow:none;
}
.sc-node.blocked.on{border-style:solid;color:#17171b}
.sc-node.wiring{transform:translate(-50%,-50%) scale(.94);cursor:grabbing}
.sc-node.target{
  border-color:var(--accent);background:#fff4f0;
  transform:translate(-50%,-50%) scale(1.07);
}
/* break-word, never anywhere: `anywhere` changes the intrinsic min-content
   width to a single character, and an absolutely positioned bubble sizes
   itself shrink-to-fit — so the whole thing collapses into a column of
   letters. This is the second time; it is written down now. */
.sc-text{flex:1 1 auto;pointer-events:none;display:block;overflow-wrap:break-word}

/* ---------- the bubble you type into ---------- */
.sc-bubble{
  position:absolute;transform:translate(-50%,-50%);z-index:4;
  background:#fff;border:1.5px solid var(--accent);border-radius:16px;
  padding:11px;box-shadow:0 10px 28px -10px rgba(20,20,28,.45);
  display:flex;flex-direction:column;gap:9px;
  animation:sc-pop 200ms var(--spring) both;
}
@keyframes sc-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
/* The field is not focused when the bubble opens, so it has to look like
   something you tap. A bare borderless line reads as a label; this reads as
   a box waiting for you. */
.sc-bubble input{
  border:1px solid rgba(23,23,27,.14);border-radius:9px;
  background:rgba(23,23,27,.03);font:inherit;font-size:15.5px;color:#17171b;
  padding:8px 10px;min-width:112px;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.sc-bubble input:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(226,96,58,.14);
}
.sc-bubble input::placeholder{color:rgba(23,23,27,.34)}
.sc-acts{display:flex;gap:6px}
.sc-acts button{
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:7px 13px;border-radius:999px;border:1px solid transparent;
}
.sc-ok{background:var(--accent);color:#fff}
.sc-del{background:none;border-color:rgba(23,23,27,.18);color:#9a2f18}
.sc-cancel{background:none;border-color:rgba(23,23,27,.18);color:rgba(23,23,27,.62)}

/* ---------- chrome ---------- */
.sc-top{
  position:absolute;left:16px;top:calc(env(safe-area-inset-top) + 14px);
  display:flex;align-items:baseline;gap:9px;pointer-events:none;
}
.sc-top b{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(23,23,27,.55);font-weight:700;
}
.sc-top span{font-family:var(--mono);font-size:11px;color:rgba(23,23,27,.38)}

.sc-hint{
  /* clears the exit button on the right, so the line never runs under it */
  position:absolute;left:16px;right:88px;bottom:calc(env(safe-area-inset-bottom) + 28px);
  margin:0;text-align:left;pointer-events:none;text-wrap:balance;
  font-size:12.5px;line-height:1.5;color:rgba(23,23,27,.42);
}

/* ============================================================
   THE SETS — one button per group of nodes, down the left, in the
   order they sit on the paper. Tapping one puts the camera back
   inside that set. This is the way home, so it is always visible.
   ============================================================ */
.sc-sets{
  position:absolute;left:14px;top:calc(env(safe-area-inset-top) + 40px);z-index:5;
  display:flex;flex-direction:column;gap:6px;
  max-width:min(62vw,220px);
}
.sc-set{
  display:flex;align-items:center;gap:8px;text-align:left;font:inherit;cursor:pointer;
  padding:7px 12px 7px 7px;border-radius:999px;
  border:1.5px solid rgba(23,23,27,.13);background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:12.5px;color:rgba(23,23,27,.68);
  box-shadow:0 2px 8px -5px rgba(20,20,28,.4);
  transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--spring);
  -webkit-tap-highlight-color:transparent;
}
.sc-set:active{transform:scale(.95)}
.sc-set i{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(23,23,27,.08);color:rgba(23,23,27,.6);
  font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;
}
.sc-set b{
  flex:1 1 auto;min-width:0;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sc-set span{flex:0 0 auto;font-family:var(--mono);font-size:10px;opacity:.45}
.sc-set.on{border-color:var(--accent);color:#17171b;background:#fff}
.sc-set.on i{background:var(--accent);color:#fff}

/* the pen: opaque, top right, and obviously on or off */
.sc-pen{
  position:absolute;right:16px;top:calc(env(safe-area-inset-top) + 12px);z-index:5;
  width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1.5px solid rgba(23,23,27,.16);background:#fff;color:rgba(23,23,27,.62);
  box-shadow:0 2px 10px -4px rgba(20,20,28,.3);
  transition:transform var(--t-fast) var(--spring),background var(--t-fast),
             color var(--t-fast),border-color var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
.sc-pen:active{transform:scale(.9)}
.sc-pen.on{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 6px 18px -6px rgba(226,96,58,.8);
}
#scratch.pen .sc-surface{cursor:crosshair}
/* while the pen is down the bubbles are not targets, they are things to circle */
#scratch.pen .sc-node{pointer-events:none}
#scratch.pen .sc-hit{pointer-events:none}

.sc-exit{
  position:absolute;right:16px;bottom:calc(env(safe-area-inset-bottom) + 18px);
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;z-index:5;
  display:grid;place-items:center;color:#fbfaf7;
  background:radial-gradient(circle at 50% 30%,#f4835c,var(--accent) 60%,#b8431f);
  box-shadow:0 10px 26px -10px rgba(226,96,58,.8);
  transition:transform 160ms var(--spring);
  -webkit-tap-highlight-color:transparent;
}
.sc-exit:active{transform:scale(.9)}

@media (prefers-reduced-motion:reduce){
  #scratch,#app,#tabs,.sc-node,.sc-exit,.sc-pen,.sc-set{transition-duration:1ms}
  .sc-bubble{animation-duration:1ms}
}
}


/* ============================================================
   INK — holding the paper starts a line, the way a pen would.
   It is not stored: its whole job is the loop you draw with it.
   ============================================================ */
.sc-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.sc-stroke{
  stroke:rgba(23,23,27,.62);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity 300ms var(--swift);
}
.sc-stroke.gone{opacity:0}

/* ============================================================
   THE SIX KINDS
   A tint and a glyph each, no new shapes. The vocabulary has to
   be readable at a glance without turning the paper into a chart.
   ============================================================ */
.sc-g{
  flex:0 0 auto;font-style:normal;font-size:11px;line-height:1;margin-right:7px;
  opacity:.85;font-weight:700;
}
.sc-node.k-outcome{border-color:rgba(226,96,58,.55);background:#fffaf8}
.sc-node.k-outcome .sc-g{color:var(--accent)}
.sc-node.k-blocker{border-color:rgba(138,42,26,.4);background:#fdf6f4}
.sc-node.k-blocker .sc-g{color:#8a2a1a}
.sc-node.k-resource{border-color:rgba(150,112,24,.38);background:#fdfaf0}
.sc-node.k-resource .sc-g{color:#8a6a16}
.sc-node.k-habit{border-color:rgba(31,122,88,.38);background:#f3faf6}
.sc-node.k-habit .sc-g{color:#1f7a58}
.sc-node.k-note{
  border-style:dotted;border-color:rgba(23,23,27,.26);background:#faf8f2;
  max-width:230px;font-size:13.5px;line-height:1.5;color:rgba(23,23,27,.78);
}
.sc-node.k-note .sc-g{color:rgba(23,23,27,.45)}

/* arriving from a plan on Do */
.sc-node.flash{animation:sc-flash 1.5s var(--swift) 2}
@keyframes sc-flash{
  0%,100%{box-shadow:0 2px 10px -4px rgba(20,20,28,.28)}
  45%{box-shadow:0 0 0 6px rgba(226,96,58,.22), 0 4px 16px -6px rgba(20,20,28,.4)}
}

/* the kind label on the bubble you type into */
.sc-kind{
  display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(23,23,27,.5);
}
.sc-kind i{font-style:normal;font-size:12px;color:var(--accent)}
.sc-bubble textarea{
  border:1px solid rgba(23,23,27,.14);border-radius:9px;
  background:rgba(23,23,27,.03);font:inherit;font-size:14.5px;line-height:1.5;color:#17171b;
  width:212px;resize:none;padding:8px 10px;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.sc-bubble textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(226,96,58,.14);
}
.sc-bubble.k-plan{border-color:#17171b}
.sc-bubble.k-plan .sc-kind i{color:#17171b}
.sc-bubble.k-plan .sc-ok{background:#17171b}

/* ============================================================
   THE PALETTE — a double tap asks what you are putting down.
   Each line says when you would reach for it, because the point
   of having six is that they teach the decomposition.
   ============================================================ */
.sc-palette{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  background:#fff;border-top:1px solid rgba(23,23,27,.12);
  border-radius:18px 18px 0 0;padding:16px 14px calc(env(safe-area-inset-bottom) + 14px);
  box-shadow:0 -12px 36px -14px rgba(20,20,28,.4);
  animation:sc-rise 240ms var(--spring) both;
  max-height:74vh;overflow-y:auto;
}
@keyframes sc-rise{from{transform:translateY(100%)}}
.sc-p-head{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(23,23,27,.45);margin:0 4px 12px;
}
.sc-p-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc-p-kind{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:2px 9px;text-align:left;font:inherit;cursor:pointer;
  padding:11px 12px;border-radius:14px;
  border:1.5px solid rgba(23,23,27,.14);background:#fff;color:#17171b;
  transition:border-color var(--t-fast),transform var(--t-fast) var(--spring);
}
.sc-p-kind:active{transform:scale(.96)}
.sc-p-kind i{
  grid-row:1;font-style:normal;font-size:13px;font-weight:700;color:var(--accent);
  width:18px;text-align:center;
}
.sc-p-kind b{grid-row:1;font-size:14px;font-weight:650}
.sc-p-kind span{
  grid-column:2;grid-row:2;font-size:11.5px;line-height:1.4;color:rgba(23,23,27,.5);
}
.sc-p-kind.k-outcome{border-color:rgba(226,96,58,.4)}
.sc-p-kind.k-blocker i{color:#8a2a1a}
.sc-p-kind.k-resource i{color:#8a6a16}
.sc-p-kind.k-habit i{color:#1f7a58}
.sc-p-kind.k-note i{color:rgba(23,23,27,.5)}
.sc-p-kind.k-step i{color:rgba(23,23,27,.7)}
.sc-p-close{
  width:100%;margin-top:10px;padding:12px;border-radius:999px;cursor:pointer;font:inherit;
  font-size:13px;font-weight:600;border:1px solid rgba(23,23,27,.16);
  background:none;color:rgba(23,23,27,.6);
}
@media (max-width:360px){.sc-p-grid{grid-template-columns:1fr}}