/* Decision tools. Uses only the Atelier tokens already defined in premium.css;
   it introduces no new colour, radius or shadow vocabulary. */

.dc-product-actions{margin-top:14px}

.dc-shelf-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:12px;
  border:1px solid var(--atelier-line);
  background:var(--atelier-paper);color:var(--atelier-ink);
  font:inherit;font-size:.92rem;cursor:pointer;
  transition:background var(--atelier-ease,180ms) ,border-color var(--atelier-ease,180ms),transform 180ms cubic-bezier(.2,.8,.2,1);
}
.dc-shelf-btn:hover:not(:disabled){background:var(--atelier-paper-deep)}
.dc-shelf-btn:active:not(:disabled){transform:translateY(1px)}
.dc-shelf-btn[aria-pressed="true"]{border-color:var(--atelier-teal);box-shadow:inset 0 0 0 1px var(--atelier-teal)}
.dc-shelf-btn:disabled{opacity:.55;cursor:not-allowed}

.dc-bundle-note{
  margin:14px 0 0;padding:14px 16px;border-radius:14px;
  background:var(--atelier-paper-deep);border:1px solid var(--atelier-line);
  box-shadow:var(--atelier-shadow-1);
}
.dc-bundle-note p{margin:0 0 8px;font-size:.92rem;line-height:1.55}

.dc-link{display:inline-flex;align-items:center;gap:6px;color:var(--atelier-teal);font-size:.9rem}

/* ---- mini shelf -------------------------------------------------------- */
.dc-shelf{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:40;max-width:min(680px,calc(100vw - 32px));width:max-content;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-radius:14px;
  background:var(--atelier-paper);border:1px solid var(--atelier-line);
  box-shadow:var(--atelier-shadow-2);
}
.dc-shelf[hidden]{display:none}
.dc-shelf-count{margin:0;font-size:.82rem;color:var(--atelier-ink);font-weight:600;white-space:nowrap}
.dc-shelf-items{list-style:none;display:flex;gap:8px;margin:0;padding:0;flex-wrap:wrap}
.dc-shelf-items li{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px 5px 10px;border-radius:10px;
  background:var(--atelier-paper-deep);font-size:.82rem;
}
.dc-shelf-items a{color:var(--atelier-ink);text-decoration:none}
.dc-shelf-items a:hover{text-decoration:underline}
.dc-shelf-actions{display:flex;gap:8px;margin-left:auto}

.dc-btn{
  padding:8px 14px;border-radius:10px;border:1px solid var(--atelier-line);
  background:var(--atelier-paper);color:var(--atelier-ink);
  font:inherit;font-size:.85rem;cursor:pointer;
  transition:background 180ms cubic-bezier(.2,.8,.2,1);
}
.dc-btn:hover:not(:disabled){background:var(--atelier-paper-deep)}
.dc-btn:disabled{opacity:.5;cursor:not-allowed}
.dc-btn-primary{background:var(--atelier-teal);border-color:var(--atelier-teal);color:#fffdf5}
.dc-btn-primary:hover:not(:disabled){background:var(--atelier-ink)}

.dc-remove{
  border:0;background:none;color:var(--atelier-ink);
  font-size:1.05rem;line-height:1;cursor:pointer;padding:2px 4px;border-radius:6px;
}
.dc-remove:hover{background:var(--atelier-sky)}

/* ---- compare dialog ---------------------------------------------------- */
.dc-dialog{
  border:0;border-radius:14px;padding:0;
  width:min(1040px,calc(100vw - 32px));max-height:min(86vh,900px);
  background:var(--atelier-paper);color:var(--atelier-ink);
  box-shadow:var(--atelier-shadow-2);
}
.dc-dialog::backdrop{background:rgba(18,63,87,.42)}
.dc-dialog-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--atelier-line);
  position:sticky;top:0;background:var(--atelier-paper);z-index:1;
}
.dc-dialog-bar h2{margin:0;font-size:1.15rem}
.dc-dialog-body{padding:20px;overflow:auto;max-height:calc(86vh - 70px)}

.dc-compare-scroll{overflow-x:auto}
.dc-compare-table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
.dc-compare-table th,.dc-compare-table td{
  text-align:left;vertical-align:top;padding:10px 12px;
  border-bottom:1px solid var(--atelier-line);
}
.dc-compare-table thead th{background:var(--atelier-paper-deep);position:relative}
.dc-compare-table tbody th{width:11rem;font-weight:600;color:var(--atelier-ink)}
.dc-col-name{display:block;padding-right:22px;font-size:.98rem}
.dc-compare-table thead .dc-remove{position:absolute;top:8px;right:6px}

.dc-compare-previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:18px}
.dc-compare-previews figure{margin:0}
.dc-compare-previews img{width:100%;height:auto;border-radius:10px;border:1px solid var(--atelier-line);box-shadow:var(--atelier-shadow-1)}
.dc-compare-previews figcaption{margin-top:6px;font-size:.76rem;color:var(--atelier-ink)}

.dc-empty{margin:0;font-size:.92rem}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- small screens ----------------------------------------------------- */
@media (max-width:640px){
  .dc-shelf{left:16px;right:16px;transform:none;width:auto;max-width:none;gap:10px}
  .dc-shelf-actions{margin-left:0;width:100%}
  .dc-shelf-actions .dc-btn{flex:1}
  .dc-dialog-body{padding:14px}
  .dc-compare-table tbody th{width:7.5rem}
}

@media (prefers-reduced-motion:reduce){
  .dc-shelf-btn,.dc-btn{transition:none}
  .dc-shelf-btn:active:not(:disabled){transform:none}
}

/* ---- kit explorer: scene builder + exploded view ----------------------- */
.ke-scene,.ke-exploded{
  margin:22px 0 0;padding:18px 20px;border-radius:14px;
  background:var(--atelier-paper);border:1px solid var(--atelier-line);
  box-shadow:var(--atelier-shadow-1);
}
.ke-scene h3,.ke-exploded h3{margin:0 0 6px;font-size:1.08rem}
.ke-lede{margin:0 0 14px;font-size:.88rem;line-height:1.55;color:var(--atelier-ink)}

.ke-chips{display:flex;flex-wrap:wrap;gap:8px}
.ke-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--atelier-line);background:var(--atelier-paper);
  color:var(--atelier-ink);font:inherit;font-size:.85rem;cursor:pointer;
  transition:background 180ms cubic-bezier(.2,.8,.2,1),border-color 180ms cubic-bezier(.2,.8,.2,1);
}
.ke-chip small{
  font-size:.72rem;padding:1px 7px;border-radius:999px;
  background:var(--atelier-paper-deep);
}
.ke-chip[aria-pressed="true"]{
  background:var(--atelier-teal);border-color:var(--atelier-teal);color:#fffdf5;
}
.ke-chip[aria-pressed="true"] small{background:rgba(255,253,245,.22);color:#fffdf5}
.ke-chip:hover{border-color:var(--atelier-teal)}

.ke-count{margin:14px 0 10px;font-size:.82rem;font-weight:600}

.ke-sheets{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;
}
.ke-sheet{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--atelier-ink);text-align:left;
  transition:transform 180ms cubic-bezier(.2,.8,.2,1);
}
.ke-sheet img{
  width:100%;height:auto;border-radius:10px;
  border:1px solid var(--atelier-line);box-shadow:var(--atelier-shadow-1);
  background:var(--atelier-paper);
}
.ke-sheet span{display:block;margin-top:6px;font-size:.74rem;line-height:1.35}
.ke-sheet:hover{transform:translateY(-2px)}

.ke-folders{display:grid;gap:10px}
.ke-folder{
  border:1px solid var(--atelier-line);border-radius:12px;
  background:var(--atelier-paper-deep);overflow:hidden;
}
.ke-folder>summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;cursor:pointer;font-size:.9rem;font-weight:600;
}
.ke-folder>summary small{font-weight:400;font-size:.76rem}
.ke-folder[open]>summary{border-bottom:1px solid var(--atelier-line)}
.ke-folder .ke-sheets{padding:14px 16px;background:var(--atelier-paper)}

@media (max-width:640px){
  .ke-scene,.ke-exploded{padding:14px 15px}
  .ke-sheets{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .ke-chip,.ke-sheet{transition:none}
  .ke-sheet:hover{transform:none}
}

/* ---- mode switch ------------------------------------------------------- */
.mode-switch{display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:var(--atelier-paper-deep);border:1px solid var(--atelier-line)}
.mode-btn-x{
  padding:6px 14px;border:0;border-radius:999px;background:none;
  color:var(--atelier-ink);font:inherit;font-size:.8rem;cursor:pointer;
  transition:background 180ms cubic-bezier(.2,.8,.2,1);
}
.mode-btn-x[aria-pressed="true"]{background:var(--atelier-paper);box-shadow:var(--atelier-shadow-1);font-weight:600}

/* ---- teacher desk ------------------------------------------------------ */
.teacher-desk{
  margin:0 auto 26px;padding:20px;max-width:1120px;
  background:var(--atelier-paper);border:1px solid var(--atelier-line);
  border-radius:14px;box-shadow:var(--atelier-shadow-1);
}
.teacher-desk[hidden]{display:none}
.td-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.td-bar h2{margin:0;font-size:1.1rem}
.td-filters{display:flex;align-items:center;gap:8px;font-size:.82rem}
.td-filters select{
  padding:7px 10px;border-radius:10px;border:1px solid var(--atelier-line);
  background:var(--atelier-paper);color:var(--atelier-ink);font:inherit;font-size:.82rem;
}
.td-scroll{overflow-x:auto}
.td-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:620px}
.td-table th,.td-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--atelier-line);vertical-align:middle}
.td-table thead th{background:var(--atelier-paper-deep);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.td-thumb{width:52px}
.td-thumb img{width:46px;height:auto;border-radius:6px;border:1px solid var(--atelier-line)}
.td-name a{color:var(--atelier-ink);font-weight:600;text-decoration:none}
.td-name a:hover{text-decoration:underline}
.td-name small{display:block;font-weight:400;font-size:.74rem;opacity:.75}
/* A discreet shortcut for teachers ready to purchase; product link remains primary. */
.td-name .td-etsy-exit{display:inline-flex;margin-top:5px;padding:4px 0;min-height:28px;
  color:var(--atelier-teal);font-size:.76rem;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.td-name .td-etsy-exit:focus-visible{outline:3px solid var(--atelier-coral);outline-offset:3px}

.td-num{white-space:nowrap}
.td-mark{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
  font-size:.66rem;background:var(--atelier-paper-deep);vertical-align:middle;
}
.td-mark-on{background:var(--atelier-teal);color:#fffdf5}
.dc-shelf-btn-sm{padding:6px 11px;font-size:.78rem}
.td-note{margin:12px 0 0;font-size:.78rem;opacity:.8}

/* Teacher mode quiets the cinematic layer without removing any of it. */
:root[data-site-mode="teacher"] .book-workspace{padding-top:8px}
:root[data-site-mode="teacher"] .page-flipper{display:none}

/* ---- table of worlds --------------------------------------------------- */
.tw-open{margin-right:8px}
.tw-group{margin:4px 0 12px;font-size:.95rem}
.tw-grid{list-style:none;margin:0 0 22px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:14px}
.tw-card{
  display:block;position:relative;padding:0;text-decoration:none;color:var(--atelier-ink);
  transition:transform 180ms cubic-bezier(.2,.8,.2,1);
}
.tw-card img{width:100%;height:auto;border-radius:10px;border:1px solid var(--atelier-line);box-shadow:var(--atelier-shadow-1)}
.tw-name{display:block;margin-top:7px;font-size:.84rem;font-weight:600}
.tw-meta{display:block;font-size:.72rem;opacity:.78;line-height:1.4}
.tw-stamp{
  position:absolute;top:7px;right:7px;padding:2px 7px;border-radius:999px;
  background:var(--atelier-paper);border:1px solid var(--atelier-line);font-size:.64rem;
}
.tw-card:hover{transform:translateY(-2px)}
.tw-links{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem}

@media (max-width:640px){
  .teacher-desk{padding:14px;border-radius:12px}
  .td-bar h2{font-size:1rem}
  /* Both label/select pairs used to share one flex row, so each select got
     about 131px and showed "Worlds and bu...". A teacher could not read which
     filter was active. Two columns, one pair per row, gives the value room. */
  .td-filters{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:10px;row-gap:8px;align-items:center}
  .td-filters select{width:100%;min-width:0}
  .tw-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:11px}
}
@media (prefers-reduced-motion:reduce){
  .mode-btn-x,.tw-card{transition:none}
  .tw-card:hover{transform:none}
}
.td-act{width:88px}
.dc-shelf-btn-sm{width:100%;justify-content:center}

/* ---- guided sampler journey -------------------------------------------- */
.sampler-next{margin:26px 0 0;padding:18px 20px;border-radius:14px;
  background:var(--atelier-paper-deep);border:1px solid var(--atelier-line)}
.sampler-next h2{margin:0 0 6px;font-size:1.05rem}
.sampler-next>p{margin:0 0 14px;font-size:.88rem;line-height:1.55}
.sampler-next-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sampler-next-list a{
  display:block;padding:13px 15px;border-radius:12px;text-decoration:none;
  background:var(--atelier-paper);border:1px solid var(--atelier-line);
  color:var(--atelier-ink);transition:border-color 180ms cubic-bezier(.2,.8,.2,1);
}
.sampler-next-list a:hover{border-color:var(--atelier-teal)}
.sampler-next-list strong{display:block;font-size:.92rem}
.sampler-next-list span{display:block;margin-top:3px;font-size:.78rem;opacity:.82;line-height:1.45}
@media (prefers-reduced-motion:reduce){.sampler-next-list a{transition:none}}
.tw-passport{margin:0 0 16px;font-size:.84rem;opacity:.82}

/* Narrow screens: drop the two widest, least decisive columns so Teacher Mode
   fits a phone without a horizontal scroll. Header and cell are hidden together,
   so the table stays coherent for assistive technology. */
@media (max-width:700px){
  .td-table{min-width:0}
  .td-table .td-thumb,.td-table .td-sig{display:none}
  .td-name small{font-size:.7rem}
  .td-act{width:72px}
}

/* Scripting-dependent controls ship in the HTML so the header never reflows after
   mount. Without JavaScript they would do nothing, so they are hidden by CSS
   instead of by a `hidden` attribute that JS has to remove. */
:root:not([data-js]) .mode-switch,
:root:not([data-js]) .mood-switch,
:root:not([data-js]) #tw-open{display:none}

/* Mobile header: the entrance, not a stack of toolbars.
   The brand leads, the two switches share its row, and navigation takes the
   second row. Without an explicit order the mode switch lands before the brand
   and forces a third row, which pushed the world art past the halfway mark. */
@media (max-width:700px){
  /* Brand, mode and lighting share one row; navigation takes the second. Three
     items only fit if the brand drops its tagline and the lighting switch goes
     icon-only: 215 + 125 + 147 = 487px against 372px available. */
  .story-header .mode-switch{order:2;flex:0 0 auto;padding:2px}
  .story-header .mode-btn-x{padding:5px 10px;font-size:.72rem;min-height:44px}
  .story-header .mood-switch{order:3;flex:0 0 auto}
  .story-header .mood-btn{padding:6px 9px!important;font-size:.72rem!important;min-height:44px!important;gap:0!important}
  .story-header .mood-btn span{display:none}
  .story-header .site-nav{order:4}
  .story-header .brand{flex:0 1 auto;margin-bottom:0}
  .story-header .approved-wordmark{width:104px}
  .story-header .approved-wordmark-tagline{display:none}
}

/* At 320px the three controls need another 20px to share the brand's row.
   Nothing is hidden: the wordmark and the mode labels simply tighten. */
@media (max-width:360px){
  .story-header.site-header{padding:8px 9px!important;gap:5px 6px}
  .story-header .approved-wordmark{width:88px}
  .story-header .mode-btn-x{padding:5px 8px;font-size:.68rem}
  .story-header .mood-btn{padding:6px 7px!important}
}