/* Shared paper-object language for every hfs2s shell.
   The photographs are real cutouts. CSS only places them, supplies a theme-aware
   shadow, and gives state changes the tiny physical gestures they need. */

.paper-art{
  --paper-size:180px;
  --paper-turn:-1.5deg;
  position:relative;
  /* A definite width keeps this item's max-content contribution at the visual
     size. `min(var(--paper-size),100%)` was indefinite during grid sizing, so
     the 2048px image claimed the whole auto track even though it painted at
     190px, collapsing the neighbouring copy to zero. */
  width:var(--paper-size);
  max-width:100%;
  min-width:0;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  isolation:isolate;
  pointer-events:none;
}
.paper-art>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:rotate(var(--paper-turn));
  transform-origin:50% 72%;
  filter:none;
}
.paper-art::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:18%;right:14%;bottom:14%;height:22%;
  border:1px solid var(--edge,#1e1e1b);
  background:var(--paper-deep,#f7eee2);
  transform:rotate(2.5deg);
  opacity:.72;
}
.paper-art--brief{--paper-turn:-1deg;}
.paper-art--inbox{--paper-turn:1.2deg;}
.paper-art--proof{--paper-turn:-2deg;}
.paper-art--workspaces{--paper-turn:1deg;}
.paper-art--small{--paper-size:124px;}
.paper-art--medium{--paper-size:190px;}
.paper-art--large{--paper-size:260px;}
.paper-art--bare::before{display:none;}

/* Physical verbs. Float is ambient and calm; arrive and stamp are one-shot
   events for a page appearing or a task completing. */
.paper-art--float>img{animation:paperFloat 5.8s ease-in-out infinite;}
.paper-art--arrive>img{animation:paperArrive .65s cubic-bezier(.2,.8,.2,1) both;}
.paper-art--stamp>img{animation:paperStamp .58s cubic-bezier(.2,.8,.2,1) both;}
@keyframes paperFloat{
  0%,100%{transform:translateY(0) rotate(var(--paper-turn));}
  50%{transform:translateY(-4px) rotate(calc(var(--paper-turn) + .5deg));}
}
@keyframes paperArrive{
  from{opacity:0;transform:translateY(12px) rotate(calc(var(--paper-turn) - 4deg)) scale(.96);}
  to{opacity:1;transform:translateY(0) rotate(var(--paper-turn)) scale(1);}
}
@keyframes paperStamp{
  0%{opacity:0;transform:translateY(-18px) rotate(calc(var(--paper-turn) - 8deg)) scale(.82);}
  68%{opacity:1;transform:translateY(2px) rotate(calc(var(--paper-turn) + 1deg)) scale(1.04);}
  100%{opacity:1;transform:translateY(0) rotate(var(--paper-turn)) scale(1);}
}

/* A safe home for decorative art beside copy. It collapses to a centered stack
   before it can squeeze a form or a table. */
.paper-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:clamp(18px,4vw,52px);
  align-items:center;
  margin-bottom:22px;
}
.paper-intro__copy{min-width:0;}
.paper-intro>.paper-art{justify-self:end;}

/* The PNGs own their highlights and shadows. Adding a second CSS shadow made
   pale paper look soft, especially against the dark console. */
@media(max-width:680px){
  .paper-intro{grid-template-columns:1fr;gap:5px;}
  .paper-intro>.paper-art{justify-self:center;}
  .paper-art--large{--paper-size:210px;}
}
@media(prefers-reduced-motion:reduce){
  .paper-art--float>img,.paper-art--arrive>img,.paper-art--stamp>img{animation:none;}
}

/* ── the cookie notice ───────────────────────────────────────────────────────
   Styled here rather than in legal-kit.css because the banner shows on the
   PUBLIC shells — landing, pending, the sign-in pages — and those load this kit
   and not that one. The four policy pages suppress the banner outright, so it
   never needs legal-kit's tokens.

   Behaviour, and the reasoning for there being no Accept button, is in
   assets/cookie-notice.js. This file only places it.

   It is a slip of paper resting on the bottom-left corner: sized to its own
   content and pinned to one corner rather than stretched across the viewport,
   because it is an informational note and not a modal, and a full-width bar
   reads as a decision the reader has to make before continuing. */
.cookie-notice{
  position:fixed;
  z-index:60;
  left:clamp(12px,3vw,28px);
  bottom:clamp(12px,3vw,28px);
  width:min(30rem,calc(100vw - 2 * clamp(12px,3vw,28px)));
  /* Above the home-indicator strip on iOS, where a bottom-pinned element
     otherwise sits under the system gesture bar. */
  margin-bottom:env(safe-area-inset-bottom);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  padding:14px 16px;
  background:var(--paper,#fef8ef);
  color:var(--ink,#1e1e1b);
  border:1px solid var(--ink,#1e1e1b);
  box-shadow:5px 5px 0 rgba(30,30,27,.13);
  font-family:var(--sans,Inter,Arial,sans-serif);
  font-size:12.5px;
  line-height:1.5;
  /* Entrance and exit are driven by data-in / data-leaving from the script, so
     the element is never visible in its pre-animation position. */
  opacity:0;
  transform:translateY(14px) rotate(-.6deg);
  transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.2,1);
}
.cookie-notice[data-in="true"]{opacity:1;transform:none;}
.cookie-notice[data-leaving="true"]{opacity:0;transform:translateY(10px) rotate(.5deg);}
.cookie-notice-text{margin:0;flex:1 1 15rem;min-width:0;color:var(--soft,#5c5a54);}
.cookie-notice-text a{color:var(--blue,#3157c8);text-underline-offset:2px;}
.cookie-notice-close{
  flex:0 0 auto;
  padding:7px 15px;
  background:var(--ink,#1e1e1b);
  color:var(--paper,#fef8ef);
  border:1px solid var(--ink,#1e1e1b);
  font:inherit;
  font-weight:600;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .16s ease;
}
.cookie-notice-close:hover{transform:translateY(-1px);}
.cookie-notice-close:active{transform:translateY(0);}
/* The console and the developer surface are dark; the notice must not be a
   cream card punched into them. Their own shells define --paper dark, so the
   only thing that needs saying is that the shadow stops being ink on paper. */
@media(prefers-color-scheme:dark){
  .cookie-notice{box-shadow:5px 5px 0 rgba(0,0,0,.3);}
}
@media(prefers-reduced-motion:reduce){
  .cookie-notice{transition:opacity .2s ease;transform:none;}
  .cookie-notice[data-leaving="true"]{transform:none;}
  .cookie-notice-close:hover{transform:none;}
}