/* notepads/module.css: the LilyPads wall, the notepad modal, the rich text editor and the sketchpad. */

/* ---- Notepads ----
   A wall of pads. auto-fit rather than a fixed column count, so it reflows
   from four across on a desktop to one on a phone with no media query. */
/* The top and right padding are NOT spacing: a pinned pad's pushpin sits
   outside its own card on the corner, and without room the grid clips it. */
.notepad-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;align-items:stretch;padding:14px 12px 0;}

/* The slot exists ONLY so the pin can break the card's edge. The card keeps
   overflow:hidden (it clips the tinted header to the card radius), so a pin
   drawn inside it would be cut off flush at exactly the boundary it is meant
   to cross. It therefore hangs off the slot, which clips nothing. */
.notepad-slot{position:relative;display:flex;
  /* The tint pair lives HERE rather than on the card, because the pin is the
     card's SIBLING: defined on the card it would resolve to nothing on the
     pin and the pushpin would render in the body text colour. */
  --np-tint:var(--sage-soft);--np-ink:var(--sage-ink);}
.notepad-slot > .notepad-card{flex:1;}
.notepad-slot[data-tint="mustard"]{--np-tint:var(--mustard-soft);--np-ink:var(--mustard-ink);}
.notepad-slot[data-tint="blue"]{--np-tint:var(--blue-soft);--np-ink:var(--blue-ink);}
.notepad-slot[data-tint="sage"]{--np-tint:var(--sage-soft);--np-ink:var(--sage-ink);}
.notepad-slot[data-tint="violet"]{--np-tint:var(--violet-soft);--np-ink:var(--violet-ink);}
.notepad-slot[data-tint="plum"]{--np-tint:var(--plum-soft);--np-ink:var(--plum-ink);}
.notepad-slot[data-tint="teal"]{--np-tint:var(--teal-soft);--np-ink:var(--teal-ink);}
.notepad-slot[data-tint="brick"]{--np-tint:var(--brick-soft);--np-ink:var(--brick-ink);}

/* Colour along the TOP only, the body left as ordinary paper: a fully tinted
   card reads as a sticky note, this reads as a notepad and sits with every
   other panel in the app. */
.notepad-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;min-height:150px;display:flex;flex-direction:column;cursor:pointer;}
.notepad-card:hover{border-color:var(--line-strong);}

/* Text from the SAME hue as its fill, the standing rule for tinted
   backgrounds: --ink on a colour reads as a mistake. */
.notepad-card-head{background:var(--np-tint);color:var(--np-ink);padding:10px 14px;
  display:flex;align-items:center;gap:8px;}
.notepad-card-title{font-weight:600;font-size:14px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.notepad-card-edit{border:0;background:transparent;color:var(--np-ink);cursor:pointer;
  padding:0;display:flex;opacity:0.7;flex-shrink:0;}
.notepad-card-edit:hover{opacity:1;}
.notepad-card-body{padding:12px 14px;display:flex;flex-direction:column;flex:1;}
/* Clipped to two lines, or one long note makes its card taller than the
   eleven beside it and the whole wall goes ragged. */
/* Ruled like paper, and the spacing is LOCKED to the line-height rather than
   chosen to look right: at any other value the words and the rules drift
   apart down the card, which reads as a rendering fault rather than as a
   notepad. Hence a whole-pixel line-height instead of the 1.5 it had.
   The ruling fills the rest of the card because `flex:1` stretches this box,
   which is what makes an empty pad still look like paper. */
.notepad-card-preview{font-size:12.5px;color:var(--ink-soft);line-height:19px;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  /* 1.4px, not a 1px hairline: a hairline rasterises into dashes once the
     card is tilted, which reads as a rendering fault rather than as ruling.
     Measured on the pinned cards, where the tilt makes it obvious. */
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 17.3px,var(--line) 17.8px 18.6px,transparent 19px);}
.notepad-card-meta{font-size:11.5px;color:var(--text-muted);margin-top:10px;}

/* ---- pinned ----
   The pad hangs from a pin that is fixed to the board, so the PIN never
   moves and the CARD tilts, pivoting about the point it is pinned through.
   Rotating both together would read as a crooked photograph instead. */
.notepad-slot.pinned > .notepad-card{transform:rotate(-0.8deg);transform-origin:88% 0;
  box-shadow:0 3px 10px rgba(0,0,0,0.10);border-color:var(--line-strong);}

/* Overhangs the corner in BOTH directions, which is what makes it read as a
   pin through the pad rather than a badge printed on it. */
/* The pin lands on the same corner the header's buttons sit in, and it is
   drawn above them, so on a pinned pad it would swallow the click that opens
   the edit form. The buttons move over rather than the pin moving off the
   corner, because the corner is what makes it read as pinned THROUGH the pad. */
.notepad-slot.pinned .notepad-card-head{padding-right:28px;}

.notepad-pin{position:absolute;top:-10px;right:-8px;z-index:2;width:24px;height:24px;
  border:0;background:transparent;padding:0;cursor:pointer;color:var(--np-ink);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.28));}
.notepad-pin .ic{width:24px;height:24px;}
.notepad-pin:hover{filter:drop-shadow(0 2px 3px rgba(0,0,0,0.4));}

/* The other half of the toggle, and only ever one of the two is on screen:
   an unpinned pad offers this, a pinned one offers the pin itself. Two pin
   affordances at once would read as one of them being broken. */
.notepad-card-pin{border:0;background:transparent;color:var(--np-ink);cursor:pointer;
  padding:0;display:flex;opacity:0.45;flex-shrink:0;}
.notepad-card-pin:hover{opacity:0.9;}

/* The way to make one, in the grid rather than only in the page head, so the
   wall always offers the next pad where you are already looking. */
.notepad-new{border:1px dashed var(--line-strong);background:transparent;border-radius:10px;
  min-height:150px;color:var(--text-muted);font:inherit;font-size:13px;cursor:pointer;}
.notepad-new:hover{border-color:var(--ink-soft);color:var(--ink-soft);}

/* ---- the rich text editor ----
   One control mounted for both the add box and the in-place edit. The bar
   is chrome, so it keeps its own border whatever the block style says. */
.rte{border:1px solid var(--line);border-radius:8px;background:var(--paper-raised);overflow:hidden;}
.rte-bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 8px;
  border-bottom:1px solid var(--line);background:var(--paper);}
.rte-btn{border:1px solid transparent;background:transparent;color:var(--ink-soft);
  border-radius:6px;padding:4px 8px;cursor:pointer;font:inherit;font-size:12.5px;min-width:28px;}
.rte-btn:hover{border-color:var(--line-strong);color:var(--ink);}
.rte-sep{width:1px;height:18px;background:var(--line);margin:0 4px;}
/* The generic control rule is (0,1,1) against a bare class, the documented
   gs-input lesson, so these name every property they need. */
.rte-bar .rte-select{border:1px solid var(--line);background:var(--paper-raised);color:var(--ink);
  border-radius:6px;padding:3px 6px;font:inherit;font-size:12px;height:auto;width:auto;}
.rte-color{width:26px;height:24px;border:1px solid var(--line);border-radius:6px;
  background:var(--paper-raised);padding:1px;cursor:pointer;}
.rte-area{min-height:84px;max-height:320px;overflow-y:auto;padding:10px 12px;
  font-size:13.5px;line-height:1.55;color:var(--ink);outline:none;overflow-wrap:anywhere;}
.rte-area:empty::before{content:attr(data-placeholder);color:var(--text-muted);}
.rte-area:focus{background:var(--paper-raised);}

/* A rendered rich note. Lists need their indent back: the app's reset
   strips it, and a bulleted note with no indent reads as broken. */
.note-rich{overflow-wrap:anywhere;}
.note-rich ul, .note-rich ol{margin:4px 0;padding-left:22px;}
.note-rich ul{list-style:disc;}
.note-rich ol{list-style:decimal;}

/* ---- the sketchpad ---- */
.sketch-modal{max-width:1080px;width:calc(100vw - 48px);}
.sketch-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);margin-bottom:10px;}
.sketch-tools{display:flex;gap:4px;flex-wrap:wrap;}
.sketch-tool{border:1px solid var(--line);background:var(--paper-raised);color:var(--ink-soft);
  border-radius:6px;padding:5px 10px;cursor:pointer;font:inherit;font-size:12.5px;}
.sketch-tool.active{background:var(--sage-soft);color:var(--sage-ink);border-color:var(--sage-ink);}
.sketch-fill{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-soft);}
.sketch-size{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);}
.sketch-size input[type="range"]{width:110px;}
.sketch-size span{font-family:var(--font-mono);min-width:2ch;text-align:right;}
#sk-color{width:30px;height:28px;border:1px solid var(--line);border-radius:6px;
  background:var(--paper-raised);padding:1px;cursor:pointer;}

/* The canvas draws at 1000x640 and SCALES to fit; the aspect ratio is
   pinned so the coordinate mapping in sketchPos() stays linear. The ground
   is painted white by the code, so the stage frames it like paper on a
   desk whatever the theme. */
.sketch-stage{border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;
  background:#ffffff;line-height:0;}
#sk-canvas{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair;}

/* A sketchpad card's body is its drawing. */
.notepad-card-sketch{flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#ffffff;border-radius:6px;min-height:0;}
.notepad-card-sketch img{max-width:100%;max-height:100%;object-fit:contain;display:block;}

/* The kind chooser on the new-pad form. */
.np-kind{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.np-kind-opt{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);
  border-radius:8px;padding:10px;cursor:pointer;font-size:13px;}
.np-kind-opt:hover{border-color:var(--line-strong);}
.np-kind-opt input{margin-top:3px;}

.row.notepad-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,0.7fr) 80px;gap:12px;align-items:center;cursor:pointer;}
.row.notepad-note{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:12px;align-items:start;}
/* A note is written prose, so it keeps its line breaks and wraps rather than
   clipping: this is the one place in the app somebody writes at length. */
.note-body{white-space:pre-wrap;overflow-wrap:anywhere;}
.np-people-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;}
.np-person{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;}
.np-person input{margin:0;}
@media (max-width:760px){
  .row.notepad-row{grid-template-columns:minmax(0,1fr) 80px;}
  .row.notepad-row > :nth-child(2){display:none;}
}

/* The colour swatch sits inside a .field, and `.field input` (0,1,1) beats a
   bare class, so it rendered as a full-width bar. Named with the ancestor. */
.field .rte-color{width:26px;}
.field .rte-toolbar select{width:auto;}