/* ========================================================================
   GagaMuller Learning — 09-detail-bar.css
   The editor's detail bar: where a block's non-visual settings are entered.

   Its own sheet because it is its own concern and because 08-deck-canvas.css
   is at the 500-line ceiling the build enforces. Loaded by index.html as sheet
   9 of 9; the order is the cascade, so it must not be moved.
   ======================================================================== */
/* ---- the detail bar ----
   Where a block's non-visual settings are entered: a video's share link, a
   document's address. Those fields used to sit under the block, inside the
   slide, permanently - so the stage showed controls the learner will never see.

   It slides up from the bottom of the stage, over the course chrome, for as
   long as it is being filled in, and the slide behind it stays exactly what the
   learner gets. See editor/deck-detailbar.js.

   position:absolute against .dk-main rather than fixed to the viewport: the
   stage is the thing it belongs to, and a fixed bar would hang over the strip
   drawer and the dialog chrome as well. */
.dk-detailbar{position:absolute; left:0; right:0; bottom:0; z-index:20;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -10px 30px rgba(0,0,0,.18);
  padding:14px 18px 15px; display:grid; gap:10px;
  animation:dkBarIn .22s cubic-bezier(.22,1,.36,1) both;}
@keyframes dkBarIn{
  from{opacity:0; transform:translate3d(0,14px,0);}
  to  {opacity:1; transform:none;}}
.dk-db-head{display:flex; align-items:center; gap:10px;}
.dk-db-head b{font:650 13.5px var(--display); color:var(--ink);}
.dk-db-x{margin-left:auto; width:26px; height:26px; border-radius:8px; display:grid;
  place-items:center; color:var(--muted); background:transparent; border:0; cursor:pointer;}
.dk-db-x:hover{background:var(--fill); color:var(--ink);}
.dk-db-x svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2;}
/* Two columns, with the link spanning both: the address is the long one and the
   one everything else is useless without. */
.dk-db-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px 12px;}
.dk-db-f{display:grid; gap:4px; min-width:0;}
.dk-db-f.wide{grid-column:1 / -1;}
.dk-db-f > span{font:700 9.5px var(--mono); letter-spacing:.5px; color:var(--muted);
  text-transform:uppercase;}
.dk-db-f input{width:100%; min-width:0;}
.dk-db-note{margin:0; max-width:78ch;}
.dk-db-foot{display:flex; gap:9px; justify-content:flex-end;}
@media (max-width:760px){
  .dk-db-grid{grid-template-columns:1fr;}
  .dk-db-f.wide{grid-column:auto;}
}