/* ============================================================
   MARKUP - styles
   No inline styles anywhere: the gateway serves this app a
   hardened CSP with style-src 'self' only (see the SITE entry in
   gateway/constants.js). Every rule lives here, and everything
   data-driven (a swatch colour, the size of a size-button dot,
   where the text editor sits) is set through the CSSOM from
   app.mjs - which CSP does not govern - rather than through a
   style attribute, which it forbids.
   Tokens are this app's OWN copy of the cosmic-dark palette in
   gateway/constants.js THEME - per-app token sets are the house
   convention; there is no shared stylesheet. Only system fonts
   are used, so the page makes no external request at all.
   ============================================================ */

/* ---------- Design tokens (THEME, gateway/constants.js) ---------- */
:root{
  --bg-deep:#05060d;                    /* page background, deepest */
  --bg-near:#0b0e1c;                    /* radial-gradient inner glow */
  --accent:#c8922a;                     /* glowing gold */
  --accent-soft:#e3b65a;                /* lighter gold for hovers */
  --text:#e8e6df;                       /* primary text */
  --text-muted:#9aa0b4;                 /* secondary text */
  --card-bg:rgba(18,22,40,0.72);
  --card-border:rgba(200,146,42,0.28);
  --card-border-hover:rgba(227,182,90,0.65);
  --bad:#e0685f;                        /* error text */
  --good:#7fc8a0;                        /* success accent */
  --r:14px;                             /* card radius */
  --measure:1160px;                     /* content width - wider than the prose apps: this one holds a canvas */
  --stage-bg:#1b1d26;                   /* the mat the photo sits on (desktop CanvasBackColor) */
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:radial-gradient(120% 90% at 50% -10%, var(--bg-near) 0%, var(--bg-deep) 60%) fixed;
  background-color:var(--bg-deep);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}
.sprite{display:none;}
.hidden{display:none !important;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.wrap{
  max-width:var(--measure);margin:0 auto;position:relative;
  display:flex;flex-direction:column;gap:10px;height:100%;
}

/* ---------- Masthead ---------- */
.masthead{padding:2px 2px 0;position:relative;}
.top-nav{
  position:absolute;top:0;right:2px;
  display:flex;align-items:center;gap:10px;
  z-index:50;
}
.back-portal-link{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;background:#0c0b09;
  border:1px solid #252220;border-radius:6px;
  color:var(--accent);text-decoration:none;
  font-family:Georgia,serif;font-size:20px;font-weight:600;line-height:1;
  transition:all .2s;cursor:pointer;
}
.back-portal-link:hover{border-color:var(--accent);background:#131110;box-shadow:0 0 10px rgba(200,146,42,.25);}
.back-portal-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.eyebrow{
  margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);
}
.masthead h1{margin:2px 0 0;font-size:26px;font-weight:600;color:var(--accent-soft);letter-spacing:.01em;}

/* ---------- Toolbar ----------
   Wraps rather than scrolls, so every control is reachable at phone width without a
   hidden overflow: the groups keep their internal order and simply stack. */
.toolbar{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding:8px 10px;
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r);
  backdrop-filter:blur(4px);
}
.group{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.group--actions{margin-left:auto;}

.tool-btn,.swatch,.size-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;
  background:transparent;border:1px solid var(--card-border);border-radius:9px;
  color:var(--text-muted);cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.tool-btn:hover,.swatch:hover,.size-btn:hover{border-color:var(--card-border-hover);color:var(--text);}
.tool-btn:focus-visible,.swatch:focus-visible,.size-btn:focus-visible,.btn:focus-visible{
  outline:2px solid var(--accent-soft);outline-offset:2px;
}
.tool-btn svg{width:20px;height:20px;}
.tool-btn.is-active{color:var(--accent-soft);border-color:var(--accent-soft);background:rgba(200,146,42,0.12);}

/* The swatch's own colour is the one thing on this page that cannot be a stylesheet
   rule - it comes from the palette constant - so app.mjs sets it on .style. */
.swatch-dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,0.35);}
.swatch.is-active{border-color:var(--accent-soft);background:rgba(200,146,42,0.12);}
.size-dot{border-radius:50%;background:currentColor;}
.size-btn.is-active{color:var(--accent-soft);border-color:var(--accent-soft);background:rgba(200,146,42,0.12);}

.btn{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 13px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid var(--card-border);color:var(--text-muted);
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.btn:hover:not(:disabled){border-color:var(--card-border-hover);color:var(--accent-soft);}
.btn:disabled{opacity:.42;cursor:not-allowed;}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--bg-deep);font-weight:700;}
.btn--primary:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent-soft);color:var(--bg-deep);}

/* ---------- Stage ----------
   touch-action:none is load-bearing: without it a touch drag scrolls the page
   instead of drawing, and a two-finger gesture zooms the document out from under
   the canvas. */
.stage{
  position:relative;flex:1 1 auto;min-height:320px;
  background:var(--stage-bg);
  border:1px solid var(--card-border);border-radius:var(--r);
  overflow:hidden;touch-action:none;
}
.canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.stage.is-drawing{cursor:crosshair;}
.stage.is-text{cursor:text;}
.stage.is-dragover{border-color:var(--card-border-hover);}

.empty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;
  pointer-events:none;
}
.empty-title{margin:0;font-size:19px;color:var(--text);}
.empty-sub{margin:0;font-size:14px;color:var(--text-muted);}
.empty-browse{color:var(--accent-soft);text-decoration:underline;cursor:pointer;pointer-events:auto;}

.text-layer{position:absolute;inset:0;pointer-events:none;}
/* The inline editor is styled to match the mark it will become: same family, same
   weight, same colour, so what is typed is what lands on the photo. Its font-size,
   colour and position are set from script, since all three come from the document. */
.text-input{
  position:absolute;pointer-events:auto;resize:none;overflow:hidden;
  margin:0;padding:2px 4px;
  background:#ffffff;border:1px solid var(--accent);border-radius:3px;
  line-height:1.2;white-space:pre;
}

/* ---------- Status, errors, panels ---------- */
.status{margin:0;font-size:13px;color:var(--text-muted);min-height:1.4em;}
.status .status-shared{color:var(--good);}
.error{margin:0;font-size:13.5px;color:var(--bad);}
/* Not styled as an error: nothing has been lost when this appears - the session and
   the link are both intact and the button beside it goes back. */
.offline{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:11px 14px;border-radius:var(--r);
  background:var(--card-bg);border:1px solid var(--card-border);
}
.offline-text{margin:0;flex:1 1 260px;font-size:13.5px;line-height:1.55;color:var(--text-muted);}
.panel{
  background:var(--card-bg);border:1px solid var(--card-border-hover);border-radius:var(--r);
  padding:16px 18px;display:flex;flex-direction:column;gap:10px;
}
.panel-title{margin:0;font-size:17px;font-weight:600;color:var(--accent-soft);}
.panel-body,.panel-note{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted);}
.panel-link{
  margin:0;font-family:var(--font-mono);font-size:13px;color:var(--text);
  word-break:break-all;background:rgba(0,0,0,0.28);border-radius:8px;padding:9px 11px;
}
.panel-actions{display:flex;flex-wrap:wrap;gap:10px;}

footer{padding:0 2px;}
.note{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-muted);}

/* ---------- Small screens ----------
   The toolbar keeps every control; only the chrome around it gives way, so a phone
   gets the same tools rather than a reduced set. */
@media (max-width:600px){
  body{padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));}
  .masthead h1{font-size:22px;}
  .toolbar{gap:6px 10px;padding:7px 8px;}
  .group--actions{margin-left:0;width:100%;}
  .btn{padding:8px 10px;letter-spacing:.1em;}
  .tool-btn,.swatch,.size-btn{width:34px;height:34px;}
  .stage{min-height:260px;}
}