/* ============================================================
   Portraits by Cristian — shared stylesheet
   All visual styling for every page lives here. Pages contain
   no inline <style>. Edit colors/spacing in one place.
   ------------------------------------------------------------
   2026-08-24 — moved onto the 2.12 "warm paper" system, the same
   tokens and structure as Gallery Studio (studio-mk4v9q.html):
   • paper canvas + one centred SHEET with a hairline border
   • hairlines instead of shadows, square corners throughout
     (circles opt back in: avatar, status dots)
   • tracked-caps labels at every rank, Inter only
   • a 44px touch floor on everything clickable
   Every CLASS NAME from the old sheet survives — only the values
   and the layout moved — so app.js and the stub pages were not
   rewired. Contrast: every text token ≥4.5:1 on canvas, surface
   and hover (same rule studio-chrome.test.js enforces).
   ============================================================ */

:root{
  /* palette — identical values to Gallery Studio's :root */
  --brand:#7d6a45; --brand-600:#6a5939; --brand-700:#584a2e;
  --brand-soft:#f1ebe0; --brand-tint:#faf6ee;
  --ink:#241f17; --ink-2:#4a4132; --muted:#6b6354; --muted-2:#6f6656;
  --line:#e3dbca; --line-2:#f0eade;
  --surface:#fffdf9; --canvas:#faf6ee;
  --hover:#f5f1e8; --active:#efe8db;
  --live:#4a7a5e; --danger:#9c3b34; --danger-soft:#f7ece9;

  /* the five product colors, kept — but re-mixed to sit on warm
     paper. Each is a duo: a deep stroke on a pale tinted plate.
     The KEY names (teal/blue/green/yellow/red) are unchanged so
     the PRODUCTS list in app.js did not have to move. */
  --pc-teal-deep:#3f6d59;   --pc-teal-tint:#e5ede7;   /* pine   (Client Galleries) */
  --pc-blue-deep:#4d6883;   --pc-blue-tint:#e6ebef;   /* slate  (Website) */
  --pc-green-deep:#63693c;  --pc-green-tint:#ebecdb;  /* olive  (Bookings) */
  --pc-yellow-deep:#8a6d22; --pc-yellow-tint:#f5edd7; /* ochre  (Studio Manager) */
  --pc-red-deep:#9c4a38;    --pc-red-tint:#f6e9e3;    /* clay   (Documents) */
  --pc-pink-deep:#96566b;   --pc-pink-tint:#f5e9ed;   /* rose   (spare) */

  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv02","cv03","cv04";
  font-size:15px;
  line-height:1.5;
}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;color:inherit;touch-action:manipulation;}

:focus-visible{outline:2px solid var(--brand-700);outline-offset:2px;border-radius:0;}

.tnum{font-variant-numeric:tabular-nums;}

/* the old page container — still used by the stub pages */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Top bar (injected by app.js) ----------
   The Studio's top line: brand mark + tracked caps on the left,
   account controls on the right, one hairline underneath. */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:60px;
  padding:0 22px;
}
/* the gradient brand mark, same recipe as the Studio's .logo —
   the white notch is painted with two background layers instead
   of a child element, so the markup stays a single <span> */
.logo{
  width:22px;
  height:22px;
  flex:0 0 22px;
  background:
    linear-gradient(var(--surface),var(--surface)) 6px 6px/9px 5px no-repeat,
    linear-gradient(var(--surface),var(--surface)) 6px 11px/5px 4px no-repeat,
    linear-gradient(135deg,var(--brand-700),#b9a685);
}
.wordmark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:4px;
}
.icon-btn{
  min-width:44px;
  min-height:44px;
  border:none;
  background:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-2);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background 150ms var(--ease),color 150ms var(--ease);
  text-decoration:none;
}
.icon-btn:hover{
  color:var(--ink);
  background:var(--hover);
}
.logout-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
  transition:color 150ms var(--ease),background 150ms var(--ease);
}
.logout-link:hover{
  color:var(--ink);
  background:var(--hover);
}
.avatar{
  /* This is a <button> (see app.js) — reset user-agent button chrome.
     One of the deliberate circles; 32px is the suite's pointer floor
     for a mouse target (tests/studio-chrome.test.js). */
  appearance:none;
  -webkit-appearance:none;
  border:none;
  outline:none;
  padding:0;
  font-family:inherit;
  width:32px;
  height:32px;
  flex:0 0 auto;
  margin-left:8px;
  border-radius:50%;
  background:var(--brand-soft);
  color:var(--brand-700);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background 150ms var(--ease);
}
.avatar:hover{background:var(--active);}
.avatar:focus-visible{
  outline:2px solid var(--brand-700);
  outline-offset:2px;
}

/* ---------- The sheet ----------
   Every screen is one centred sheet on the warm stage, divided by
   hairlines — the Studio's only layout. */
.stage{
  display:block;
}
.sheet{
  max-width:1180px;
  margin:30px auto 70px;
  background:var(--surface);
  border:1px solid var(--line);
}

/* ---------- Sheet head ---------- */
.page-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  padding:22px 22px 20px;
  border-bottom:1px solid var(--line);
}
.page-head h1{
  margin:0;
  font-size:20px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  line-height:1.25;
}
.page-head p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:13.5px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}
.dash-date{
  margin-left:auto;
  padding-top:5px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---------- Section labels ---------- */
.section-label{
  text-transform:uppercase;
  font-size:10.5px;
  letter-spacing:.26em;
  color:var(--muted);
  font-weight:500;
  margin:0 0 20px;
}

section.products{
  padding:24px 22px 32px;
  border-bottom:1px solid var(--line-2);
}

/* ---------- Products row — option cards ---------- */
.products-row{
  display:grid;
  grid-template-columns:repeat(4,1fr); /* default for tablet/narrow-desktop widths */
  gap:18px;
}
/* Five cards (Client Galleries, Website, Bookings, Studio Manager,
   Documents) go five-across once there's enough room — below this the
   4-column default above keeps things from feeling cramped. */
@media (min-width:1100px){
  .products-row{grid-template-columns:repeat(5,1fr);}
}
.product-col{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  border:1px solid var(--line-2);
  padding:16px 16px 14px;
  transition:border-color 150ms var(--ease);
}
.product-col:hover{border-color:var(--line);}
/* the plate: a square of the product's tint with its deep stroke */
.product-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  cursor:pointer;
}
.product-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-teal  {background:var(--pc-teal-tint);  color:var(--pc-teal-deep);}
.icon-blue  {background:var(--pc-blue-tint);  color:var(--pc-blue-deep);}
.icon-green {background:var(--pc-green-tint); color:var(--pc-green-deep);}
.icon-yellow{background:var(--pc-yellow-tint);color:var(--pc-yellow-deep);}
.icon-red   {background:var(--pc-red-tint);   color:var(--pc-red-deep);}
.icon-pink  {background:var(--pc-pink-tint);  color:var(--pc-pink-deep);}

.product-title{
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--ink);
  padding-bottom:11px;
  margin-bottom:5px;
  border-bottom:1px solid var(--line-2); /* the ruled line under the caption */
}
.product-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.product-links li a{
  display:flex;
  align-items:center;
  min-height:36px;
  font-size:13.5px;
  color:var(--muted);
  transition:color 150ms var(--ease);
}
.product-links li a:hover{color:var(--ink);}

/* ---------- Quick access — ruled index panels ----------
   The same pattern as the Collections index in the Studio:
   plate · title · meta, one hairline per row. */
section.quick-access{
  padding:24px 22px 30px;
}
.qa-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.qa-card{
  border:1px solid var(--line);
  padding:0;
  min-width:0;
}
.qa-card h3{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
  padding:15px 16px 13px;
  border-bottom:1px solid var(--line-2);
}
.qa-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  min-height:64px;
  cursor:pointer;
  transition:background 150ms var(--ease);
}
.qa-row + .qa-row{border-top:1px solid var(--line-2);}
.qa-row:hover{background:var(--hover);}
.qa-thumb{
  width:72px;
  aspect-ratio:16/10;
  flex-shrink:0;
  border:1px solid var(--line);
  background:var(--active);
  overflow:hidden;
}
.qa-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.qa-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}
.qa-text .title{
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qa-text .sub{
  font-size:12.5px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
/* Live / Draft / Confirmed / Pending — the Studio's .cstate language */
.qa-state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  font-size:10px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.qa-state.live{color:var(--live);}
.qa-dot{
  width:6px;
  height:6px;
  border-radius:50%; /* a deliberate circle, like the Studio's status dots */
  background:currentColor;
}
.qa-go{
  display:flex;
  flex:0 0 auto;
  color:var(--muted);
}
.qa-go svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Empty-state line inside a quick-access card */
.qa-empty{
  font-size:13px;
  color:var(--muted);
  margin:0;
  padding:14px 16px 18px;
}

/* ---------- Footer (injected by app.js) ---------- */
footer{
  padding:0 0 40px;
}
footer p{
  margin:0;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-2);
  text-align:center;
}

/* ---------- Stub / placeholder pages ----------
   Each stub is a small sheet of its own, centred on the stage. */
.stub{
  min-height:calc(100vh - 61px - 120px); /* viewport minus header/footer */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:64px 0;
}
.stub-inner{
  max-width:460px;
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  padding:46px 40px 40px;
}
.stub h1{
  font-size:15px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 14px;
  color:var(--ink);
}
.stub p{
  margin:0 0 26px;
  color:var(--muted);
  font-size:13.5px;
}
.stub-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 14px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color 150ms var(--ease),background 150ms var(--ease);
}
.stub-back:hover{
  color:var(--ink);
  background:var(--hover);
}

/* ---------- Reveal ----------
   Kept as a class hook only. The load-in animation was removed —
   same call as the rest of the suite (2026-08-22): speed first,
   and a stuck-hidden section becomes impossible. */
.reveal{opacity:1;}

/* ---------- Lock screen (Google sign-in, see app.js AUTH) ---------- */
/* Hides the page content while the sign-in state is being resolved,
   and again whenever the user is signed out. */
body.locked main{display:none;}

.lock-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background:
    radial-gradient(1200px 600px at 80% -10%,var(--brand-tint),transparent),
    var(--canvas);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.lock-box{
  width:100%;
  max-width:360px;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  padding:38px 34px 30px;
}
/* the brand mark above the wordmark — pure CSS so the lock markup
   in app.js did not have to change */
.lock-mark::before{
  content:'';
  display:block;
  width:26px;
  height:26px;
  margin:0 auto 18px;
  background:
    linear-gradient(var(--surface),var(--surface)) 7px 7px/11px 6px no-repeat,
    linear-gradient(var(--surface),var(--surface)) 7px 13px/6px 5px no-repeat,
    linear-gradient(135deg,var(--brand-700),#b9a685);
}
.lock-mark{
  font-size:12px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:8px;
}
.lock-sub{
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:28px;
}
/* Google sign-in button — paper, hairline, tracked caps. */
.btn-google{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:inherit;
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:var(--surface);
  border:1px solid var(--line);
  cursor:pointer;
  transition:background 150ms var(--ease),border-color 150ms var(--ease);
}
.btn-google svg{width:16px;height:16px;flex-shrink:0;}
.btn-google:hover{
  background:var(--hover);
  border-color:var(--brand);
}
.btn-google:disabled{
  cursor:default;
  opacity:.55;
  background:var(--surface);
  border-color:var(--line);
}
.lock-error{
  font-size:12.5px;
  color:var(--danger);
  margin-top:12px;
  min-height:16px;
}
.lock-shake{animation:shake 320ms var(--ease);}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-5px);}
  80%{transform:translateX(5px);}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .lock-shake{animation:none;}
  *{transition-duration:0.01ms !important;}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .products-row{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .topbar-inner{padding:0 14px;}
  /* the finger target grows to 44 while the painted circle stays 32 —
     background-clip:content-box, the Studio's .toggle technique */
  .avatar{
    width:44px;height:44px;padding:6px;
    background-clip:content-box;margin-left:0;
  }
  .sheet{margin:18px auto 50px;border-left:0;border-right:0;}
  .page-head{padding:18px 16px 16px;}
  section.products{padding:20px 16px 26px;}
  section.quick-access{padding:20px 16px 24px;}
  .dash-date{display:none;}
  /* on a phone every control is a finger target */
  .product-links li a{min-height:44px;}
}
@media (max-width:760px){
  .qa-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .products-row{grid-template-columns:repeat(2,1fr);gap:14px;}
  .wrap{padding:0 20px;}
  /* narrow phones: let the account controls take their own line under the
     brand if they need it — the same two-row move the Studio bar makes */
  .topbar-inner{flex-wrap:wrap;}
  .wordmark{min-height:54px;letter-spacing:.18em;}
  .topbar-right{margin-left:auto;min-height:48px;}
  /* row titles wrap on a phone rather than losing their tails to ellipsis */
  .qa-text .title{white-space:normal;line-height:1.4;}
}
@media (max-width:360px){
  .products-row{grid-template-columns:1fr;}
  .page-head h1{font-size:17px;}
}