/* One vertical canvas for browsing and purchase selection.
   Tokens: ink #192840, muted #58677d, blue #2358d8, paper #f1f5fa,
   line #dce4ef, white #fff. Manrope headings / DM Sans reading and controls. */
.vertical-layout .workspace:not([hidden]) { max-width:1200px; margin:auto; }
.vertical-layout .workspace:not([hidden]) { grid-template-columns:minmax(0,1fr); gap:24px; }
.vertical-layout:not([data-mode="purchase"]) .side-panel { display:contents; }
.vertical-layout [data-panel="view"] { display:block; padding:24px 8px; }
.vertical-layout [data-panel="view"].is-hidden { display:none; }
.vertical-layout [data-panel="view"] .panel-kicker { margin:0 0 8px; font-size:13px; }
.vertical-layout .home-intro { padding:12px 8px 4px; }
.vertical-layout .home-intro h1 { max-width:1000px; margin:0; font-size:clamp(28px,3vw,42px); }
.vertical-layout [data-panel="view"] h2 { margin:0; font-size:28px; }
.vertical-layout [data-panel="view"] .panel-lede { max-width:88ch; margin:12px 0; font-size:16px; }
.vertical-layout .home-browse-links { display:flex; flex-wrap:wrap; gap:8px 28px; }
.vertical-layout .home-browse-links a { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin:0; font:600 15px var(--body); color:var(--blue); text-underline-offset:4px; }
.vertical-layout .home-browse-links .hero-explore-link { margin:0; font-size:15px; }
.vertical-layout #canvasStage { scroll-margin-top:16px; }
.vertical-layout:not([data-mode="purchase"]) #canvasStage { scroll-margin-top:calc(var(--home-entry-height,90px) + 24px); }
.vertical-layout .home-purchase-row { display:grid; gap:28px; margin-top:20px; }
.vertical-layout [data-panel="view"] .home-start-price { width:100%; max-width:560px; border:0; margin:0; padding:0; }
.vertical-layout .home-price-table dt,.vertical-layout .home-price-table dd { font-size:16px; }
.vertical-layout .home-start-price>span { font-size:14px; }
.vertical-layout .home-quick-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:0; padding:24px 0 0; border-top:1px solid var(--line); list-style:none; counter-reset:home-steps; }
.vertical-layout .home-quick-guide li { counter-increment:home-steps; }
.vertical-layout .home-quick-guide li::before { content:counter(home-steps); display:block; margin-bottom:10px; font:600 13px var(--body); color:var(--blue); }
.vertical-layout .home-quick-guide strong { font-size:16px; }
.vertical-layout .home-quick-guide p { margin:6px 0 0; font-size:15px; line-height:1.6; color:var(--ink-muted); }
.vertical-layout .home-placement-note { margin:24px 0 0; color:var(--ink-muted); font-size:14px; }
.vertical-layout .home-purchase-entry { display:flex; align-items:center; justify-content:space-between; align-self:start; gap:16px; position:sticky; top:8px; z-index:8; padding:14px 18px; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:0 3px 12px #19284008; }
.vertical-layout .home-purchase-entry>div { min-width:0; }
.vertical-layout .home-purchase-entry h2 { font-size:18px; }
.vertical-layout .home-purchase-entry p { margin:4px 0 0; color:var(--ink-muted); font-size:13px; }
.vertical-layout #startSelecting { flex:none; width:auto; margin:0; font-size:16px; }
.vertical-layout .home-learn-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:20px; }
.vertical-layout .home-learn-links a { display:flex; flex-direction:column; gap:8px; padding:18px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.vertical-layout .home-learn-links strong { display:flex; justify-content:space-between; gap:8px; font:700 18px var(--display); }
.vertical-layout .home-learn-links strong>span { color:var(--blue); }
.vertical-layout .home-learn-links a>span { color:var(--ink-muted); font-size:15px; }
.vertical-layout .home-learn-links a:hover strong { color:var(--blue); }
.vertical-layout .home-browse-links a:focus-visible,.vertical-layout .home-learn-links a:focus-visible,.vertical-layout #canvasStage:focus-visible { outline:3px solid #8aa9f4; outline-offset:4px; }
.vertical-layout .canvas-stage { overflow:visible; }
.vertical-layout .canvas-wrap { flex:none; min-height:0; height:auto; touch-action:pan-y pinch-zoom; border-radius:12px 12px 0 0; }
.vertical-layout[data-mode="purchase"] .canvas-wrap[data-tool="select"],
.vertical-layout[data-mode="purchase"] .canvas-wrap[data-tool="select"] #adCanvas { touch-action:none; }
.vertical-layout[data-mode="purchase"] .canvas-wrap[data-tool="pan"] #adCanvas { touch-action:pan-y pinch-zoom; }
.vertical-layout:not([data-mode="purchase"]) #adCanvas { touch-action:pan-y pinch-zoom; cursor:grab; }
.vertical-layout:not([data-mode="purchase"]) #adCanvas.is-grabbing { cursor:grabbing; }
.vertical-layout:not([data-mode="purchase"]) .tool-hint { top:14px; right:14px; bottom:auto; left:auto; max-width:calc(100% - 180px); font-size:11px; pointer-events:none; }
.vertical-layout:not([data-mode="purchase"]) .canvas-tools { top:12px; left:12px; flex-direction:row; }
.vertical-layout:not([data-mode="purchase"]) .canvas-tools button { width:auto; border-bottom:0; border-right:1px solid var(--line); }
.vertical-layout:not([data-mode="purchase"]) .canvas-tools button:last-child { border-right:0; }
.vertical-layout .canvas-tooltip { position:fixed; z-index:30; width:240px; max-width:calc(100vw - 16px); padding:12px; font:400 13px/1.4 var(--body); box-shadow:0 8px 32px #19284026; }
.vertical-layout .canvas-tooltip .hover-creative { display:block; width:100%; height:135px; margin:0 0 10px; object-fit:contain; background:#f1f5fa; border-radius:5px; }
.vertical-layout .canvas-tooltip strong { font-size:15px; overflow-wrap:anywhere; }
.vertical-layout .canvas-tooltip span { overflow-wrap:anywhere; }
.vertical-layout[data-mode="info"] #infoPanel { position:fixed; z-index:20; right:24px; bottom:20px; width:340px; padding:24px; background:white; border:1px solid var(--line); border-radius:12px; max-height:calc(100dvh - 40px); overflow-y:auto; box-shadow:0 12px 60px #19284030; }
.vertical-layout .purchase-flow { max-width:1200px; margin:auto; }
.vertical-layout[data-mode="purchase"][data-purchase-step="1"] #sidePanel { display:contents; }
.vertical-layout[data-mode="purchase"][data-purchase-step="1"] #mobilePurchaseDetails { order:-1; padding:20px 24px; background:white; border:1px solid var(--line); border-radius:12px; }
.vertical-layout .choose-spot { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 24px; align-items:start; }
.vertical-layout .choose-spot>.panel-kicker { display:none; }
.vertical-layout .choose-spot>h2,.vertical-layout .choose-spot>.panel-lede { grid-column:1/-1; margin:0; }
.vertical-layout .choose-spot>h2 { font-size:24px; }
.vertical-layout .choose-spot>details { margin:0; padding-top:10px; border-top:1px solid var(--line); font-size:14px; }
.vertical-layout .choose-spot>details>summary { cursor:pointer; font-weight:600; min-height:34px; }
.vertical-layout .selection-canvas-tools { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; position:sticky; top:var(--purchase-toolbar-top,90px); z-index:7; background:var(--paper); border-bottom:1px solid var(--line); border-radius:12px 12px 0 0; }
.vertical-layout .selection-canvas-tools .canvas-tools,
.vertical-layout .selection-canvas-tools .purchase-tools { position:static; display:flex; flex-direction:row; flex-wrap:wrap; max-width:100%; }
.vertical-layout .selection-canvas-tools .canvas-tools button { width:auto; border-bottom:0; border-right:1px solid var(--line); }
.vertical-layout[data-mode="purchase"] .canvas-wrap { border-radius:0; scroll-margin-top:calc(var(--purchase-toolbar-top,90px) + 116px); }
.vertical-layout[data-mode="purchase"] .tool-hint { left:12px; top:12px; right:auto; bottom:auto; max-width:calc(100% - 24px); pointer-events:none; }
.vertical-layout[data-mode="purchase"] .precision-hint { top:52px; }
.vertical-layout[data-mode="purchase"] .mobile-gesture-coach { top:88px; bottom:auto; }
.vertical-layout .home-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding:24px; border-top:1px solid var(--line); background:white; font-size:13px; }
.home-footer .canvas-legal-links { display:flex; flex-wrap:wrap; gap:16px; margin:0; }
.compact-directory .feed-main { max-width:1120px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:20px 24px; }
.compact-directory .feed-hero { padding:0; flex-wrap:wrap; gap:8px 16px; }
.compact-directory .feed-hero h1 { font-size:28px; }
.compact-directory .explore-view-switch { margin:0; }
.compact-directory .feed-directory { grid-column:1/-1; }
.compact-directory .feed-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; border:0; border-radius:0; overflow:visible; background:none; }
.compact-directory .feed-item { display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:0; padding:0; border:1px solid var(--line); border-radius:12px; background:white; }
.compact-directory .feed-creative { height:clamp(88px,12vh,132px); aspect-ratio:auto; border-radius:0; border-bottom:1px solid var(--line); }
/* This shorter artwork window uses contain directly instead of the shared 1.7-ratio percentages. */
.compact-directory .feed-creative .placement-thumbnail-image { width:100%!important; height:100%!important; object-fit:contain; background:none; box-shadow:none; }
.compact-directory .feed-item-content { padding:10px 14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; align-items:center; }
.compact-directory .feed-item-content h3 { grid-column:1/-1; grid-row:1; font-size:17px; margin:0; min-height:0; max-height:2.6em; }
.compact-directory .feed-item-content>p:not(.feed-item-facts) { grid-column:1/-1; grid-row:2; font-size:14px; min-height:0; margin:0; line-height:1.4; -webkit-line-clamp:1; }
.compact-directory .feed-item-facts { display:block; grid-column:1/-1; grid-row:4; min-height:0; margin:0; padding:0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.compact-directory .feed-item-category { grid-column:1; grid-row:3; margin:0; font-size:12px; }
.compact-directory .feed-item-meta { grid-column:2; grid-row:3; justify-content:flex-end; font-size:11px; gap:6px; flex-wrap:wrap; }
.compact-directory .feed-item-footer { grid-column:1/-1; grid-row:5; display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; padding:0; margin:0; font-size:13px; }
.compact-directory .feed-item-footer .feed-advertiser-tag { display:none; }
.compact-directory .feed-item-footer a { display:inline-flex; align-items:center; min-height:32px; font-size:13px; width:auto; }
.compact-directory .feed-item-footer .feed-record-link { display:inline-flex!important; }
/* Category directory: one readable column, theme hierarchy instead of ordinal numbers.
   Keep the site's Manrope headings / DM Sans labels; blue marks hierarchy, not selection rank. */
.compact-directory .feed-filter-dialog { width:min(460px,calc(100% - 24px)); max-height:calc(100dvh - 32px); padding:0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.compact-directory .feed-filter-dialog[open] { display:flex; flex-direction:column; }
.compact-directory .feed-filter-dialog::backdrop { background:#19284038; backdrop-filter:none; }
.compact-directory .feed-filter-dialog>header { flex:none; align-items:center; padding:12px 20px 8px; border:0; }
.compact-directory .feed-filter-dialog>header h2 { font:700 20px/1.3 var(--display); letter-spacing:-.02em; }
.compact-directory .feed-filter-dialog>header button { padding:8px; min-height:40px; font:500 14px var(--body); }
.compact-directory .category-search { flex:none; padding:0 20px 12px; border-bottom:1px solid var(--line); }
.compact-directory .category-search>label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.compact-directory .category-search input { display:block; width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid #bbc9db; border-radius:8px; background:#fff; color:var(--ink); font:400 16px/1.4 var(--body); }
.compact-directory .category-search p { margin:8px 0 0; font:400 13px/1.5 var(--body); color:var(--ink-muted); }
.compact-directory .category-groups { display:block; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:0 12px 0 20px; }
.compact-directory .category-theme { margin:0; border-bottom:1px solid var(--line); }
.compact-directory .category-theme:last-child { border-bottom:0; }
.compact-directory .category-theme>summary { display:grid; grid-template-columns:minmax(0,1fr) 16px; gap:5px 10px; padding:14px 8px 14px 0; min-height:48px; cursor:pointer; list-style:none; }
.compact-directory .category-theme>summary::-webkit-details-marker { display:none; }
.compact-directory .category-theme>summary::after { content:""; grid-column:2; grid-row:1; align-self:center; justify-self:center; width:7px; height:7px; border-right:1.5px solid var(--ink-muted); border-bottom:1.5px solid var(--ink-muted); transform:rotate(45deg); }
.compact-directory .category-theme[open]>summary::after { transform:rotate(225deg); }
.compact-directory .category-theme-name { color:var(--blue); font:600 15px/1.4 var(--body); letter-spacing:0; }
.compact-directory .category-theme-count { margin-left:8px; color:var(--ink-muted); font:400 12px/1.4 var(--body); }
.compact-directory .category-theme-preview { grid-column:1; color:var(--ink-muted); font:400 13px/1.5 var(--body); overflow-wrap:anywhere; }
.compact-directory .category-theme[open] .category-theme-preview { display:none; }
.compact-directory .category-theme-options { padding:0 0 10px; }
.compact-directory .category-option { display:flex; align-items:center; gap:12px; min-height:40px; padding:6px 8px; margin:0; border-radius:6px; color:var(--ink); font:400 15px/1.45 var(--body); letter-spacing:0; text-transform:none; cursor:pointer; }
.compact-directory .category-option:hover { background:var(--paper); }
.compact-directory .category-option:has(input:checked) { background:#edf3ff; }
.compact-directory .category-option input { flex:none; width:18px; height:18px; margin:0; accent-color:var(--blue); cursor:pointer; }
.compact-directory .category-theme-all { font-weight:600; }
.compact-directory .category-option[hidden],.compact-directory .category-theme[hidden],.compact-directory .category-selection[hidden] { display:none; }
.compact-directory #categorySearchEmpty { margin:20px 0; font:400 15px/1.5 var(--body); }
.compact-directory .category-filter-actions { display:flex; align-items:center; gap:12px; flex:none; padding:12px 20px; border-top:1px solid var(--line); background:#fff; font:400 13px/1.4 var(--body); }
.compact-directory #categorySelectionStatus { flex:1; color:var(--ink-muted); }
.compact-directory .category-filter-actions button { min-height:42px; padding:9px 12px; border:0; border-radius:7px; background:none; color:var(--blue); font:600 14px var(--body); cursor:pointer; }
.compact-directory .category-filter-actions button:disabled { opacity:.45; cursor:default; }
.compact-directory #categoryApply { background:var(--blue); color:white; }
.compact-directory .category-selection { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; font:500 13px/1.4 var(--body); }
.compact-directory .category-selection a { display:inline-flex; align-items:center; min-height:32px; color:var(--blue); text-decoration:none; }
.compact-directory .category-selection-chip { padding:5px 10px; border:1px solid #c4d5fa; border-radius:20px; background:#edf3ff; }
.compact-directory .feed-filter-dialog :is(input,button,summary):focus-visible,.compact-directory .category-selection a:focus-visible { outline:3px solid #8aa9f4; outline-offset:2px; }
@media(max-width:480px) {
  .compact-directory .feed-filter-dialog { max-height:calc(100dvh - 24px); }
  .compact-directory .category-option { min-height:44px; }
  .compact-directory .category-filter-actions { flex-wrap:wrap; padding:10px 16px; gap:8px; }
  .compact-directory .category-search,.compact-directory .feed-filter-dialog>header { padding-inline:16px; }
  .compact-directory .category-groups { padding-left:16px; }
}
/* Leave a usable native-scroll lane even on medium-width laptops. */
@media(min-width:761px) {
  .vertical-layout .workspace,.vertical-layout .purchase-flow { width:calc(100% - 12vw); }
}
@media(max-width:760px) {
  .vertical-layout .home-intro h1 { font-size:28px; }
  .vertical-layout [data-panel="view"] h2 { font-size:24px; }
  .vertical-layout [data-panel="view"] .panel-lede { margin:10px 0; }
  .vertical-layout .home-browse-links { gap:0 20px; }
  .vertical-layout .home-quick-guide,.vertical-layout .home-learn-links { grid-template-columns:minmax(0,1fr); gap:18px; }
  .vertical-layout .home-quick-guide li { position:relative; padding-left:30px; }
  .vertical-layout .home-quick-guide li::before { position:absolute; top:3px; left:0; }
  .vertical-layout .home-purchase-entry { padding:12px; gap:12px; }
  .vertical-layout .home-purchase-entry h2 { font-size:16px; }
  .vertical-layout #startSelecting { font-size:14px; padding:10px 14px; }
  .vertical-layout .home-learn-links { gap:0; }
  .vertical-layout[data-mode="info"] #infoPanel { width:calc(100% - 24px); right:12px; bottom:12px; padding:20px; max-height:70dvh; }
  .vertical-layout .choose-spot { grid-template-columns:minmax(0,1fr); gap:8px; }
  .vertical-layout[data-mode="purchase"][data-purchase-step="1"] #mobilePurchaseDetails { padding:16px; }
  .vertical-layout .choose-spot>h2 { font-size:22px; }
  .vertical-layout .choose-spot>.panel-lede { font-size:14px; }
  .vertical-layout .choose-spot>details { padding-top:8px; }
  .vertical-layout .choose-spot>details>summary { min-height:30px; }
  .vertical-layout .selection-canvas-tools { padding:8px; }
  .compact-directory .feed-search input { flex:1; min-width:120px; }
  .compact-directory .feed-filter-button { width:auto; }
  .vertical-layout .tool-hint { font-size:11px; bottom:6px; left:8px; }
  .vertical-layout:not([data-mode="purchase"]) .tool-hint { top:60px; right:auto; bottom:auto; left:12px; max-width:calc(100% - 24px); }
  .vertical-layout:not([data-mode="purchase"]) .canvas-tools .word-control { min-width:54px; font-size:11px; }
}
@media(max-width:680px) {
  .compact-directory .feed-main { display:block; padding:18px 14px; }
  .compact-directory .feed-hero,.compact-directory .explore-view-switch { margin-bottom:12px; }
  .compact-directory .feed-list { grid-template-columns:minmax(0,1fr); gap:14px; }
  .compact-directory .feed-creative { height:140px; }
  .compact-directory .feed-item-content { padding:12px 14px; }
  .compact-directory .feed-item-footer a { min-height:40px; }
}