/* ============================================================================
   surfaces.css: the surfaces content sits on
   ----------------------------------------------------------------------------
   The desk background, the paper cards (plain / ruled / grid / index card), the
   sticky notes and their scattered arrangement, and the two cork boards. These
   are the backdrops; purely decorative overlays (tape, pins, stickers) live in
   decorations.css.
   ========================================================================== */

/* ---- The desk ------------------------------------------------------------
   Kept intentionally flat at the top: the sub-app header is sticky with a solid
   desk background, so any gradient here would show through as a visible band
   behind it. Only a soft warmth in the far bottom-right corner remains. */
.desk-bg{background:
  radial-gradient(900px 600px at 110% 110%, rgba(120,80,40,.13), transparent 55%),
  var(--grain), var(--desk);}

/* ---- Paper surfaces ------------------------------------------------------ */
/* Plain sheet: grain over warm paper, hand-cut asymmetric corners, soft shadow. */
.paper{
  position:relative;
  background:var(--grain),var(--paper);
  border:1px solid rgba(122,90,56,.28);
  border-radius:5px 14px 6px 15px/13px 6px 15px 6px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 6px 16px var(--shadow);
  color:var(--ink);
}
/* Ruled notepaper: horizontal blue rules every 28px. */
.paper-lined{background:
  repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(91,125,153,.24) 27px, rgba(91,125,153,.24) 28px),
  var(--grain), var(--paper);}
/* Graph paper: faint blue grid every 22px. */
.paper-grid{background:
  repeating-linear-gradient(0deg, transparent, transparent 21px, rgba(91,125,153,.16) 21px, rgba(91,125,153,.16) 22px),
  repeating-linear-gradient(90deg, transparent, transparent 21px, rgba(91,125,153,.16) 21px, rgba(91,125,153,.16) 22px),
  var(--grain), #fbf4e2;}

/* Index card: warm stock with a faint graph-paper grid and a red margin line up
   top. The old horizontal-only rules were removed because list content never
   lined up with them; a light grid gives texture without that alignment problem. */
.index-card{background:
  repeating-linear-gradient(0deg, transparent 0 21px, rgba(91,125,153,.11) 21px 22px),
  repeating-linear-gradient(90deg, transparent 0 21px, rgba(91,125,153,.11) 21px 22px),
  var(--grain), #fffdf4;
  border:1px solid rgba(122,90,56,.3);border-radius:6px 10px 7px 11px/11px 7px 12px 6px;
  box-shadow:0 5px 14px var(--shadow);position:relative;}
.index-card::before{content:'';position:absolute;left:0;right:0;top:34px;height:2px;background:rgba(192,61,46,.45);pointer-events:none;}

/* ---- Sticky notes --------------------------------------------------------
   A sticky note is a coloured square (colour via the --sc variable, defaulting
   to butter). .sc-* pick a colour; .tilt-* give a fixed rotation; .scatter
   auto-rotates its children in a repeating 4-note pattern; .lift raises a note
   on hover (pointer devices only). */
.sticky{
  position:relative;
  background:linear-gradient(180deg, rgba(0,0,0,.06), transparent 16%), var(--grain), var(--sc,var(--butter));
  color:var(--ink);
  border-radius:2px 3px 12px 3px;
  box-shadow:0 8px 12px -6px rgba(80,55,30,.4);
  transition:transform .18s ease, box-shadow .18s ease;
}
.sc-butter{--sc:var(--butter);} .sc-pink{--sc:var(--spink);} .sc-mint{--sc:var(--smint);}
.tilt-a{transform:rotate(-1.3deg);} .tilt-b{transform:rotate(.9deg);}
.scatter>*:nth-child(4n+1){transform:rotate(-1.2deg);}
.scatter>*:nth-child(4n+2){transform:rotate(1deg);}
.scatter>*:nth-child(4n+3){transform:rotate(-.6deg);}
.scatter>*:nth-child(4n){transform:rotate(1.6deg);}
@media(hover:hover){
  .lift:hover{transform:rotate(0deg) translateY(-4px) !important;box-shadow:0 14px 24px -8px rgba(80,55,30,.45);z-index:3;}
}

/* ---- Cork boards ---------------------------------------------------------
   Real cork photos (ambientCG Cork001, CC0), tiled seamlessly, in a slim wooden
   frame. A soft inset shadow gives just enough board-like depth. The -alt board
   (cork2) is used on the Photos screen so it differs from the checklist board. */
.corkboard{background:
  linear-gradient(rgba(70,40,15,.08), rgba(70,40,15,.08)),
  url("/anna-s-desk/assets/cork.jpg");
  background-size:auto, 460px;
  border:5px solid #a4713f;border-radius:7px;
  box-shadow:inset 0 0 40px rgba(50,25,5,.38), 0 5px 15px var(--shadow);}
.corkboard-alt{background:
  linear-gradient(rgba(60,35,12,.06), rgba(60,35,12,.06)),
  url("/anna-s-desk/assets/cork2.jpg");
  background-size:auto, 520px;
  border:5px solid #9c6a3a;border-radius:7px;
  box-shadow:inset 0 0 40px rgba(50,25,5,.34), 0 5px 15px var(--shadow);}