/* The studio's primitives — the thirteen components this editor has.
   Geometry and structure only: every value is a token the constitution
   declares. A literal here is a finding. */
/* The editor shell. One token set, four type sizes, and no control that
   renders in whatever the browser felt like. The sheet below styles itself. */
*{box-sizing:border-box}
html,body{margin:0;background:var(--app-ground);color:var(--app-text);font:var(--type-body)/1.5 var(--font-ui)}
a{color:inherit}

/* ---- controls ------------------------------------------------------- */
button,input,select,textarea{font:inherit;color:inherit}
button,select,label.file{cursor:pointer}
button,select,label.file{
  border:1px solid var(--app-glass-border);background:var(--app-glass-fill);
  backdrop-filter:var(--app-glass-filter);-webkit-backdrop-filter:var(--app-glass-filter);
  padding:9px 12px;min-height:var(--control);border-radius:var(--radius-inset);
  font-size:var(--type-body);line-height:var(--leading-tight);text-align:left;
  transition:background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}
button:hover,select:hover,label.file:hover{background:var(--app-hover-fill);border-color:var(--app-line-strong)}
button:active{background:var(--app-active-fill)}
button:disabled{opacity:.32;cursor:default;background:var(--app-inset-fill)}
button:disabled:hover{background:var(--app-inset-fill);border-color:var(--app-line)}
button.primary{color:var(--app-accent);font-weight:var(--weight-bold);
  border-color:rgba(var(--app-accent-rgb),.38);
  background:rgba(var(--app-accent-rgb),.10)}
button.primary:hover{background:rgba(var(--app-accent-rgb),.16);
  border-color:rgba(var(--app-accent-rgb),.55)}
:where(button,select,input,label.file,[contenteditable]):focus-visible{
  outline:2px solid var(--app-accent);outline-offset:2px}

/* an icon-only control is square and draws its own glyph */
button.icon{display:grid;place-items:center;width:var(--size-icon-control);
  height:var(--size-icon-control);min-height:var(--size-icon-control);padding:0;flex:none}
button.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* a select keeps its native behaviour and loses its native chrome */
select{
  appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23faf7f5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:16px}

/* the file pickers are hidden; a label drives them */
input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

input[type=range]{appearance:none;-webkit-appearance:none;width:100%;
  background:transparent;height:22px;padding:0;border:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--app-line)}
input[type=range]::-moz-range-track{height:2px;background:var(--app-line)}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;
  width:12px;height:18px;margin-top:-8px;border-radius:var(--radius-tight);
  background:var(--app-accent);border:0}
input[type=range]::-moz-range-thumb{width:12px;height:18px;border-radius:var(--radius-tight);
  background:var(--app-accent);border:0}

/* ---- layout --------------------------------------------------------- */
/* The window does not scroll. The three columns are exactly as tall as the
   viewport, and each rail scrolls its own contents, so the flyer stays put
   while you reach for something at the bottom of a panel. */
.layout{display:grid;grid-template-columns:200px minmax(0,1fr) 252px;
  gap:var(--space-5);padding:var(--space-5);height:100dvh;overflow:hidden}
.sidebar,.inspector{background:var(--app-glass-fill);padding:22px 14px;
  border:1px solid var(--app-glass-border);border-radius:var(--radius-surface);
  min-height:0;overflow-y:auto;overscroll-behavior:contain}
.workarea{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.canvas{flex:1;min-height:0;padding:4px 20px 32px;overflow:auto;
  overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center}
/* A rail is a panel, not a document - keep its scrollbar quiet. */
.sidebar,.inspector,.canvas{scrollbar-width:thin;scrollbar-color:var(--app-hover-fill) transparent}
.sidebar::-webkit-scrollbar,.inspector::-webkit-scrollbar,.canvas::-webkit-scrollbar{width:9px;height:9px}
.sidebar::-webkit-scrollbar-thumb,.inspector::-webkit-scrollbar-thumb,
.canvas::-webkit-scrollbar-thumb{background:var(--app-hover-fill);border-radius:var(--radius-tight);
  border:2px solid transparent;background-clip:content-box}
.sidebar::-webkit-scrollbar-thumb:hover,.inspector::-webkit-scrollbar-thumb:hover,
.canvas::-webkit-scrollbar-thumb:hover{background:var(--app-active-fill);background-clip:content-box}
.sidebar::-webkit-scrollbar-track,.inspector::-webkit-scrollbar-track,
.canvas::-webkit-scrollbar-track{background:transparent}
.sheet-wrap{flex-shrink:0;position:relative}

.eyebrow{font-size:var(--type-small);letter-spacing:var(--tracking-label);text-transform:uppercase;
  margin:0 0 var(--space-7);color:var(--app-muted)}
#stories{display:grid;gap:var(--space-2)}
.story-button{display:block;width:100%;padding:var(--space-4) var(--space-5);border:0;
  border-radius:var(--radius-inset);background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;min-height:var(--control-row)}
.story-button:hover{background:var(--app-hover-fill)}
/* A chosen flyer is named in the accent, not fenced by a bar down its edge.
   The app marks a current thing by colouring it, never by a rail. */
.story-button.active{background:var(--app-inset-fill)}
.story-button.active strong{color:var(--app-accent)}
.story-button span{font-size:var(--type-small);letter-spacing:.12em;text-transform:uppercase;
  color:var(--app-muted);display:block;margin-bottom:5px}
.story-button strong{font-size:var(--type-lead);font-weight:500}
.sidebar-note{font-size:var(--type-small);line-height:1.7;color:var(--app-muted);margin:26px 8px}

.workbar{display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;gap:var(--space-5);flex-wrap:wrap}
.workbar .group{display:flex;gap:6px;align-items:center}
.workbar select{max-width:120px}
.page-info{font-size:var(--type-small);color:var(--app-muted);white-space:nowrap}

.inspector>div{background:var(--app-inset-fill);border:1px solid var(--app-line);
  border-radius:var(--radius-surface);padding:15px 16px;margin-bottom:var(--space-5)}
.inspector>div>.rule:first-child{display:none}
.workspace-actions{border:0;padding-bottom:15px;margin-bottom:var(--space-5)}
.top-actions{display:flex;flex-wrap:wrap;gap:7px}
.top-actions button{width:auto;margin:0}
.save-label{font-size:var(--type-small);width:100%;line-height:var(--leading-body);margin-bottom:7px;color:var(--app-muted)}
.inspector h2{font:var(--type-title)/1.1 var(--font-ui);font-weight:var(--weight-regular);margin:0 0 18px}
.inspector p{font-size:var(--type-body);line-height:var(--leading-body);color:var(--app-muted)}
.inspector label{font-size:var(--type-small);display:block;margin:16px 0 7px;color:var(--app-muted)}
.inspector button,.inspector label.file{width:100%;margin-bottom:7px}
.inspector .rule{border-top:1px solid var(--app-line);margin:var(--space-8) 0}
.inspector .hint,.font-status{font-size:var(--type-small);color:var(--app-muted)}

.notice{padding:12px 22px;background:var(--app-glass-fill);backdrop-filter:var(--app-glass-filter);border-bottom:1px solid rgba(var(--app-accent-rgb),.45);
  font-size:var(--type-body);line-height:var(--leading-body);display:flex;gap:var(--space-5);
  align-items:center;justify-content:space-between}
.notice[hidden]{display:none}
.loading{padding:90px 25px;font:var(--type-title) var(--font-ui);text-align:center;color:var(--app-muted)}
.mobile-select{display:none}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--app-glass-overlay-fill);color:var(--app-text);padding:var(--space-5) var(--space-7);z-index:100;border-radius:var(--radius-inset);border:1px solid var(--app-line);backdrop-filter:var(--app-glass-filter);
  max-width:90vw;font-size:var(--type-body)}
.toast:empty{display:none}

dialog{border:1px solid var(--app-glass-border);padding:28px;max-width:450px;width:90vw;
  border-radius:var(--radius-dialog);backdrop-filter:var(--app-glass-filter);-webkit-backdrop-filter:var(--app-glass-filter);
  background:var(--app-glass-overlay-fill);color:var(--app-text);margin:auto;box-shadow:0 24px 70px rgba(0,0,0,.55)}
dialog::backdrop{background:var(--app-glass-scrim-fill);backdrop-filter:var(--app-glass-scrim-filter)}
dialog h2{font:var(--type-title)/1.1 var(--font-ui);font-weight:var(--weight-regular);margin:0 0 14px}
dialog p{line-height:1.7;font-size:var(--type-body);color:var(--app-muted)}
dialog .actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-7)}
dialog button{margin:0}
dialog .dialog-select{width:100%;margin:4px 0 6px}
.pdf-steps{border-left:2px solid rgba(var(--app-accent-rgb),.38);padding-left:var(--space-5);margin-top:var(--space-5)}
.shortcuts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;margin:0 0 var(--space-4);
  font-size:var(--type-small);align-items:baseline}
.shortcuts dt{font-family:var(--font-ui);font-weight:var(--weight-bold);color:var(--app-accent);
  justify-self:start;white-space:nowrap}
.shortcuts dd{margin:0;color:var(--app-muted)}
.dlg-label{display:block;font-size:var(--type-small);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--app-muted);margin:16px 0 6px}
.emp-input{width:100%;padding:0 var(--space-5);min-height:var(--control);
  border:1px solid var(--app-glass-border);background:var(--app-inset-fill);
  border-radius:var(--radius-inset);color:var(--app-text);
  font:var(--weight-regular) var(--type-lead)/1 var(--font-ui);letter-spacing:.14em;
  font-variant-numeric:tabular-nums;caret-color:var(--app-accent)}
.emp-input:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}
#empRow[hidden]{display:none}
.passcode{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3);margin:0 0 var(--space-2)}
.passcode input{width:100%;aspect-ratio:3/4;padding:0;min-height:0;
  border:1px solid var(--app-glass-border);background:var(--app-inset-fill);
  border-radius:var(--radius-inset);color:var(--app-text);
  font:var(--weight-regular) var(--type-title)/1 var(--font-ui);text-align:center;
  font-variant-numeric:tabular-nums;caret-color:var(--app-accent)}
.passcode input:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}
.passcode input[data-filled]{border-color:rgba(var(--app-accent-rgb),.45);
  background:rgba(var(--app-accent-rgb),.10)}
.passcode-error{font-size:var(--type-small);color:var(--app-danger);margin:6px 0 0;min-height:1.2em}
.passcode-error[hidden]{display:none}

.measure{position:fixed!important;left:-20000px!important;top:0;visibility:hidden;pointer-events:none}
.print-stage{display:none}

/* ---------------------------------------------------------------------------
   The Sindhorn app's surface, brought to the studio. Glass needs something
   behind it to be glass at all, so the shell carries a slow atmosphere - two
   soft lights, brass and plum - and the rails blur what passes under them.
   None of this reaches the page: the sheet restates its own palette above,
   and @media print resets the ground to white.
--------------------------------------------------------------------------- */
.layout{
  background:
    radial-gradient(80ch 60ch at 12% -10%, rgba(178,142,56,.16), transparent 62%),
    radial-gradient(70ch 55ch at 92% 8%,  rgba(120,96,150,.20), transparent 60%),
    radial-gradient(90ch 70ch at 50% 115%, rgba(46,39,59,.85), transparent 70%),
    var(--app-ground);
  background-attachment:fixed}

.sidebar,.inspector{
  background:var(--app-glass-fill);
  backdrop-filter:var(--app-glass-filter);-webkit-backdrop-filter:var(--app-glass-filter)}
.canvas{background:transparent}

/* the workbar floats like everything else; nothing in this interface has a
   hard corner. */
.workbar{background:var(--app-glass-fill);
  backdrop-filter:var(--app-glass-filter);-webkit-backdrop-filter:var(--app-glass-filter);
  border:1px solid var(--app-glass-border);border-radius:var(--radius-surface)}
.workarea{gap:12px}

/* A4 on a dark ground wants a real edge, or it looks pasted on. */
.sheet-wrap{
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 24px 60px -12px rgba(0,0,0,.65);
  outline:1px solid rgba(250,247,245,.10);outline-offset:0}

/* a chosen flyer reads as chosen without borrowing the paper colour */
.story-button.active{background:var(--app-inset-fill)}
.story-button.active strong{color:var(--app-accent)}
.story-button strong{color:var(--ink)}

/* the passcode wells and the name field sit on glass, not on paper */
.emp-input,
.emp-input::placeholder{color:var(--app-muted)}

/* the drop overlay and the replace hint were built for a light shell */
.photo-frame[data-dropping]:after{background:rgba(29,24,38,.82);color:var(--app-text)}

/* Print is untouched: the shell never reaches the paper. */
@media print{
  .layout{background:none!important}
  .sheet-wrap{box-shadow:none!important;outline:0!important}
}

/* ---- moved out of the page's stylesheet: these style the tool ---- */

.preview .sidebar,.preview .edit-action,.preview .inspector>div:not(.workspace-actions){display:none!important}

.preview .layout{grid-template-columns:minmax(0,1fr) 190px}

.preview .workspace-actions{border:0}

.preview .canvas{padding-top:10px}

@media(max-width:1150px){
.layout{grid-template-columns:160px minmax(0,1fr)}
.inspector{grid-column:1/-1;border-top:1px solid var(--app-line);display:flex;gap:24px;flex-wrap:wrap}
.inspector>div{min-width:220px;flex:1}
.inspector .rule{display:none}
.workspace-actions{border:0}
.preview .layout{display:block}
.preview .inspector{display:block}
}

@media(max-width:700px){
.layout{display:block;min-height:0;height:auto;overflow:visible}
.workarea{display:block;overflow:visible}
.canvas{overflow:visible}
.inspector{overflow:visible}
.sidebar{display:none}
.mobile-select{display:block;width:100%;padding:var(--space-5) var(--space-5) 0}
.workbar{padding:12px;gap:8px}
.workbar .group{gap:4px}
.workbar button{padding:7px 10px;min-height:var(--control)}
  .workbar button.icon{padding:0;min-height:var(--size-icon-control)}
.workbar select{max-width:95px}
.canvas{padding:4px 10px 24px;min-height:var(--canvas-floor);align-items:flex-start}
.inspector{display:block;padding:20px}
.inspector button:not([hidden]){display:inline-block;width:auto;margin-right:5px}
.inspector>div{margin-bottom:24px}
.notice{padding:10px 14px;align-items:flex-start}
.page-info{font-size:11px}
.preview .mobile-select{display:block}
.preview .canvas{align-items:flex-start}
}

@media print{
@page{size:A4 portrait;margin:0}
html,body{background:white!important;margin:0!important;padding:0!important}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------------------------------------------------------------------------
   Movement. A tool people use all day should feel settled, not busy: things
   that appear ease in, things that respond do it in about a tenth of a second,
   and nothing moves that the reader did not ask to move. The sheet itself is
   never animated - it is paper.
--------------------------------------------------------------------------- */
/* Nothing above may reach the printed sheet. */
@media print{
*,*::before,*::after{animation:none!important;transition:none!important}
}

/* My flyers — the list of a salesperson's own copies, under Edition. */
.my-flyers{display:flex;flex-direction:column;gap:2px;margin:10px 0 0}

.my-flyers .eyebrow{margin:0 0 6px}

.my-flyers .hint{margin:0}

.doc-row{display:flex;align-items:baseline;gap:8px;width:100%;padding:7px 8px;
  border:0;border-radius:var(--radius-tight);background:transparent;text-align:left;cursor:pointer;
  font:var(--doc-lead)/1.35 var(--font-ui);color:var(--app-text)}

.doc-row:hover{background:var(--app-hover-fill)}

.doc-row.current{background:var(--app-active-fill);font-weight:var(--weight-bold)}

.doc-row>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The name is what you are looking for; the meta yields to it. */
.doc-row small{font-size:var(--doc-body);color:var(--app-muted);flex:0 0 auto;max-width:45%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.doc-row>span:first-child{flex:1 1 auto}

.doc-drop{flex-shrink:0;width:18px;height:18px;line-height:16px;text-align:center;
  border-radius:var(--radius-tight);color:var(--app-muted);opacity:0;font-size:14px;align-self:center}

.doc-row:hover .doc-drop,.doc-drop:focus-visible{opacity:1}

.doc-drop:hover{background:var(--app-hover-fill);color:var(--app-text)}

.emp-input.wide{width:100%;box-sizing:border-box}

/* The LINE mark is the one icon that is not square - 178.37 x 170.70. Held in
   a square box a print rasteriser slices it rather than letterboxing it, which
   flattened the right of the bubble and cut the tail. Let the height set the
   size and the viewBox give the width, so the box and the artwork agree. */

/* Naming a copy is not typing a passcode: the digit face and its tracking
   belong to the six wells, not to a sentence. */
.emp-input.wide{width:100%;box-sizing:border-box;font:400 15px/1.35 var(--font-ui);
  letter-spacing:normal;font-variant-numeric:normal;padding:11px 12px}

/* Rendering takes a few seconds on the server, so the dialog waits with you. */
.pdf-busy{display:none;flex-direction:column;align-items:stretch;gap:10px;
  margin-top:20px;color:var(--app-muted);font-size:var(--doc-lead)}

dialog[data-busy] .pdf-busy{display:flex}

dialog[data-busy] .actions,dialog[data-busy] .pdf-steps{display:none}

.progress{position:relative;height:4px;border-radius:var(--radius-tight);
  background:var(--app-inset-fill);overflow:hidden}

.progress:after{content:'';position:absolute;top:0;bottom:0;left:0;width:38%;
  border-radius:var(--radius-tight);background:var(--app-accent);
  animation:travel 1.15s var(--motion-ease) infinite}

@keyframes travel{0%{transform:translateX(-105%)}100%{transform:translateX(370%)}}

@media (prefers-reduced-motion:reduce){
.progress:after{animation:none;width:100%;opacity:.55}
}

/* The tool, drawn on the paper: a drop target, a hint, the sheet's arrival.
   Scoped to .sheet but owned here, because none of it prints. */
.photo-frame[data-dropping]:after{content:'Drop to place';position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;background:var(--app-glass-scrim-fill);color:var(--app-text);
  font:600 12px var(--font-ui);letter-spacing:var(--tracking-label);text-transform:uppercase}
.sheet.editing .photo-frame:hover:after{content:'Replace, reposition, or drop one in';position:absolute;z-index:2;bottom:12px;right:12px;color:var(--app-text);background:var(--app-glass-overlay-fill);padding:8px 12px;font-size:12px}
@media (prefers-reduced-motion:no-preference){
.sheet-wrap{animation:settle var(--motion-ms) var(--motion-ease) both}
.sheet [contenteditable=true]{transition:box-shadow var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease)}
}

/* ---- Select -------------------------------------------------------------
   The one native control left in the interface drew the operating system's
   own list, which is the only place the browser still showed through. This
   is the app's arrangement: a framed trigger carrying the current value and
   a chevron, and a menu that is an overlay - so it reads as a control before
   it is touched, which the bare story name never did. */
.select{position:relative}
.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  width:100%;min-height:var(--control);text-align:left}
.select-trigger svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--motion-fast) var(--motion-ease)}
.select[data-open="true"] .select-trigger svg{transform:rotate(180deg)}
.select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-menu{position:absolute;z-index:60;top:calc(100% + var(--space-2));left:0;min-width:100%;
  background:var(--app-glass-overlay-fill);border:1px solid var(--app-glass-border);
  backdrop-filter:var(--app-glass-filter);-webkit-backdrop-filter:var(--app-glass-filter);
  border-radius:var(--radius-inset);overflow:hidden;padding:0;
  max-height:60vh;overflow-y:auto}
.select-menu[hidden]{display:none}
/* an option inside a menu: the menu owns the corners */
.select-option{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  width:100%;min-height:var(--control);border:0;border-radius:0;background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;padding:var(--space-3) var(--space-5)}
.select-option+.select-option{border-top:1px solid var(--app-line)}
.select-option:hover{background:var(--app-hover-fill)}
.select-option[aria-selected="true"]{color:var(--app-accent);font-weight:var(--weight-bold)}
.select-option[aria-selected="true"]::after{content:'';width:14px;height:8px;flex:none;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translateY(-2px)}