/* DigiThat viewer frame — shared by every Wattle & Stone example page.
   Compact neutral charcoal bars (the same in light and dark site themes) with a grey
   "FICTIONAL EXAMPLE" strip directly below the top bar and directly above the bottom bar.
   "View without DigiThat frame" hides only the two charcoal bars: both fictional-example strips,
   the tilted stamp and the footer's full explanation always stay. */
:root{
  --dt-bg:#363636;--dt-text:#f5f5f5;--dt-muted:#d5d5d5;--dt-border:#565656;
  --dt-orange:#D16F43;--dt-orange-hover:#e0845a;--dt-on-orange:#1f1f1f;--dt-focus:#8fd8e0;
  --dt-strip-bg:#e3e3e3;--dt-strip-text:#353535;--dt-strip-line:#c9c9c9;
}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Charcoal bars (top and bottom share one component) ---- */
.dt-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px 20px;min-height:46px;box-sizing:border-box;padding:3px clamp(12px,1.6vw,24px);background:var(--dt-bg);color:var(--dt-text);font:600 .8125rem/1.25 Arial,Helvetica,sans-serif;color-scheme:dark}
.dt-bar a,.dt-bar button{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 6px;background:none;border:0;border-radius:3px;font:inherit;cursor:pointer}
.dt-bar a:hover,.dt-bar button:hover{text-decoration:underline;text-underline-offset:3px}
.dt-bar :focus-visible{outline:3px solid var(--dt-focus);outline-offset:1px}
.dt-back{justify-self:start;margin-left:-6px}
.dt-identity{display:flex;align-items:center;gap:14px}
.dt-identity .dt-logo{padding:0;min-height:38px}
.dt-identity img{width:76px;height:auto;aspect-ratio:1056/312;display:block;flex:none}
.dt-text{display:grid;gap:1px;padding-left:14px;border-left:1px solid var(--dt-border);white-space:nowrap}
.dt-text strong{font-weight:700;color:var(--dt-text)}
.dt-text span{font-weight:400;color:var(--dt-muted);font-size:.75rem}
.dt-dock .dt-text span{font-size:.8125rem}
.dt-actions{justify-self:end;display:flex;align-items:center;gap:4px 14px;flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}
.dt-back{white-space:nowrap}
.dt-bare-btn{font-weight:600!important}
.dt-bar .dt-cta{background:var(--dt-orange);color:var(--dt-on-orange);font-weight:700;padding:0 14px;min-height:36px;border-radius:3px}
.dt-bar .dt-cta:hover{background:var(--dt-orange-hover);text-decoration:none}
.dt-bar .dt-cta{position:relative}
.dt-bar .dt-cta::after{content:"";position:absolute;inset:-4px 0}/* 44 px touch area around the 36 px button */

/* ---- FICTIONAL EXAMPLE strips (about 19 px: 14 px line + 2 px padding each side + 1 px border) ---- */
.fiction-bar{margin:0;padding:2px 12px;min-height:19px;box-sizing:border-box;background:var(--dt-strip-bg);color:var(--dt-strip-text);font:700 .625rem/.875rem Arial,Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-align:center;overflow-wrap:anywhere}
.dt-top .fiction-bar{border-bottom:1px solid var(--dt-strip-line)}
.dt-bottom .fiction-bar{border-top:1px solid var(--dt-strip-line)}

/* ---- Placement: top frame sticks; bottom frame is fixed on larger screens ---- */
.dt-top{position:sticky;top:0;z-index:40}
.dt-bottom{position:fixed;left:0;right:0;bottom:0;z-index:40}
.dt-bottom .dt-bar{padding-bottom:max(3px,env(safe-area-inset-bottom))}
body.has-dt-bottom{padding-bottom:calc(var(--dock-h,65px) + var(--bookbar-h,0px))}
.dt-short{display:none}
html{scroll-padding-top:calc(var(--viewer-h,0px) + 96px);scroll-padding-bottom:calc(var(--dock-h,0px) + var(--bookbar-pad,0px) + 24px)}

/* ---- "Show DigiThat frame" (bare view) ---- */
.dt-return{display:none;justify-content:flex-end;padding:0 clamp(12px,1.6vw,24px);background:var(--dt-bg);font:600 .75rem/1.2 Arial,Helvetica,sans-serif}
.dt-return button{color:var(--dt-text);background:none;border:0;min-height:30px;padding:0 6px;cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:3px}
.dt-return :focus-visible{outline:3px solid var(--dt-focus);outline-offset:1px}
html.dt-bare .dt-bar{display:none}
html.dt-bare .dt-return{display:flex}
html.in-studio .dt-return{display:none}

/* ---- Narrower screens: drop the secondary line, then wrap into two short rows with 44 px targets ---- */
.bare-short{display:none}
@media (max-width:1180px){
  .dt-top .dt-text span{display:none}
}
@media (max-width:900px){
  .bare-long{display:none}
  .bare-short{display:inline}
  .dt-top .dt-text{display:none}
  .dt-bar{gap:4px 14px}
}
/* Phones: one slim 44 px bar at the top and one at the bottom, both pinned, each with a 19 px strip.
   Top: Back · logo · Hide frame. Bottom: "DigiThat website example" · Plan my website. */
@media (max-width:760px){
  .dt-long,.dt-top .dt-cta,.dt-top .dt-text,.dt-bottom .dt-back{display:none}
  .dt-short{display:inline}
  .dt-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:none;gap:0 8px;min-height:44px;padding:0 8px}
  .dt-top .dt-bar > *{grid-row:1}
  .dt-top .dt-back{grid-column:1;margin-left:0}
  .dt-top .dt-identity{grid-column:2;justify-self:center}
  .dt-top .dt-actions{grid-column:3;display:flex}
  .dt-dock{grid-template-columns:minmax(0,1fr) auto;padding:0 8px max(0px,env(safe-area-inset-bottom)) 12px}
  .dt-dock .dt-identity{grid-column:1;justify-self:start;gap:10px}
  .dt-dock .dt-actions{grid-column:2;display:flex}
  .dt-dock .dt-logo{display:none}
  .dt-dock .dt-text{border-left:0;padding-left:0}
  .dt-dock .dt-text span{font-size:.75rem;color:var(--dt-muted);white-space:nowrap}
  .dt-bar a,.dt-bar button,.dt-identity .dt-logo{min-height:44px}
  .dt-bar .dt-cta{min-height:36px;padding:0 12px;font-size:.78rem}
  .dt-identity img{width:64px}
  .dt-return{padding:0 8px}
  .dt-return button{min-height:44px}
  .fiction-bar{letter-spacing:.14em}
}
/* Phones, slimmer still: 36 px bars and 15 px strips (targets stay at least 36 px, above the 24 px minimum) */
@media (max-width:760px){
  .dt-bar{min-height:36px;font-size:.75rem}
  .dt-bar a,.dt-bar button,.dt-identity .dt-logo{min-height:36px}
  .dt-bar .dt-cta{min-height:28px;padding:0 10px;font-size:.72rem}
  .dt-identity img{width:56px}
  .dt-dock .dt-text span{font-size:.7rem}
  .fiction-bar{min-height:15px;padding:1px 8px;font-size:.5625rem;line-height:.75rem;letter-spacing:.16em}
  .dt-return button{min-height:36px}
}
@media (max-width:359px){
  .dt-dock .dt-text span{font-size:.7rem}
  .dt-bar .dt-cta{padding:0 10px}
}
@media print{.dt-top .dt-bar,.dt-bottom .dt-bar,.dt-return{display:none}}