/* ============================================================================
   base.css: resets, element defaults, and typography helpers
   ----------------------------------------------------------------------------
   Global rules that apply before any component styling: the box model, page
   background, form-control fonts, the scrollbar, focus rings, contenteditable
   list spacing (the Notes editor), the photo-board drag handle cursor, and the
   three font-role helper classes.
   ========================================================================== */

/* Border-box everywhere; kill the mobile tap flash and the 300ms tap delay. */
*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Page canvas. overflow-x:clip stops decorative stickers that overhang a card
   edge from creating a horizontal scrollbar. */
html,body{
  margin:0;
  padding:0;
  background:#e5d5b7;
  overflow-x:clip;
}

/* Form controls default to the clean UI font unless a component overrides it. */
input,textarea,select,button{ font-family:var(--f-body); }

/* Placeholders read as faint handwriting. */
::placeholder{
  color:#a89478;
  font-family:var(--f-hand);
  font-size:1.06em;
}

/* Notes/recipes never need a drag-to-resize textarea. */
textarea{ resize:none; }

/* Slim, warm scrollbar (WebKit/Blink only). */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#c9a67e; border-radius:8px; }

/* Keyboard focus ring: a dashed terracotta outline, matching the hand-drawn look. */
:focus-visible{
  outline:2px dashed var(--terra);
  outline-offset:2px;
}

/* ---- contenteditable (the rich-text Notes editor) ------------------------ */
/* Show the placeholder attribute as faint handwriting while the note is empty. */
[contenteditable]:empty:before{
  content:attr(placeholder);
  color:#a89478;
  pointer-events:none;
  font-family:var(--f-hand);
  font-size:1.1em;
}
/* List spacing inside the editor (bulleted/numbered lists the user can insert). */
[contenteditable] ul{ margin:4px 0; padding-left:22px; }
[contenteditable] ol{ margin:4px 0; padding-left:22px; }
[contenteditable] li{ margin:2px 0; }

/* ---- Photo-board drag handle -------------------------------------------- */
/* The bar the user grabs to reposition a pinned photo. touch-action:none lets
   the pointer drag work on touchscreens without the page scrolling underneath. */
.photo-drag-bar{
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.photo-drag-bar:active{ cursor:grabbing; }

/* ---- Typography helpers -------------------------------------------------- */
/* Apply one of the four font roles to any element. */
.hand{ font-family:var(--f-hand); }  /* handwriting */
.type{ font-family:var(--f-mono); }  /* typewriter (stamps/labels) */
.serif{ font-family:var(--f-head); } /* printed/editorial headings */