/* The preview-first shell. Why each rule exists: docs/shell-css.md.
   SCREEN ONLY, every rule (docs, "Print"): tests/structure.js refuses any
   media query that is not screen, at any depth. */

@media screen {
  /* Lede and sections below the tool, by flex order (no DOM move). */
  .shell-page main.wrap { display: flex; flex-direction: column; padding-top: 1rem; }
  .shell-page .tool-panel.shell { order: 1; }
  .shell-page .lede { order: 2; }
  .shell-page main.wrap > section { order: 3; }
  .shell-page main.wrap > .tool-preview { order: 2; }
}
/* Phone: sheet first, preview.js's inspect row directly under it. */
@media screen and (max-width: 859px) {
  .tool-panel.shell { display: flex; flex-direction: column; }
  .tool-panel.shell > * { order: 1; }
  .tool-panel.shell > .sheet-wrap { order: 0; }
}
/* The nav alone wrapped to 172px on a 390px phone. */
@media screen and (max-width: 640px) {
  .shell-page .site-header .site-nav { display: none; }
}

@media screen {
  .tool-panel.shell {
    background: none;
    border: 0;
    padding: 0;
  }
  .tool-panel.shell .sheet-wrap { margin: 0 0 0.75rem; }

  .shell-tray {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 0.5rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.6rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    margin: 0 0 0.9rem;
  }
  .shell-tray button {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
  .shell-tray button[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

  .shell-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: var(--panel);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -10px 28px rgba(27, 30, 35, 0.28);
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    max-height: 75vh;
    overflow: auto;
    transform: translateY(100%);
    transition: transform 0.22s ease;
  }
  .shell-drawer.open { transform: translateY(0); }
  /* #44's copy of #gen-note, capped; #53 .more fade (docs) */
  .shell-note { position: sticky; top: -1rem; z-index: 1; max-height: 7.25rem; overflow-y: auto; overscroll-behavior: contain; }
  .shell-note.more { --f: linear-gradient(#000 calc(100% - 1.75rem), #0000); -webkit-mask-image: var(--f); mask-image: var(--f); }
}
@media screen and (prefers-reduced-motion: reduce) { .shell-drawer { transition: none; } }
/* Closed drawer leaves the tab order after its slide (docs) */
@media screen and (max-width: 859px) {
  body:not(.no-js) .shell-drawer:not(.open) {
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  /* focus clears the note (2.4.11) */
  .shell-drawer:has(> .shell-note:not([hidden])) { scroll-padding-top: 8rem; }
  /* #49 (docs) */
  .shell-drawer .gen-controls > label.inline { min-height: var(--tap); }
}
@media screen and (max-width: 859px) and (prefers-reduced-motion: reduce) {
  body:not(.no-js) .shell-drawer:not(.open) { transition: none; }
}
@media screen {
  .shell-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.6rem;
  }
  .shell-drawer-head h2 { margin: 0; font-size: 1.02rem; }
  .shell-drawer-close {
    appearance: none;
    background: none;
    border: 0;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    padding: 0.3rem 0.1rem;
    min-height: var(--tap);
    cursor: pointer;
  }
  /* JS off: the drawer renders inline, nothing unreachable. */
  .no-js .shell-drawer { position: static; transform: none; box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius); max-height: none; margin: 0 0 0.9rem; }
  .no-js .shell-drawer-close { display: none; }
}

/* Desktop: tray, #gen-note and drawer in column 1, sheet in column 2. */
@media screen and (min-width: 860px) {
  .tool-panel.shell {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    gap: 1.5rem;
    align-items: start;
  }
  .tool-panel.shell .shell-tray {
    grid-column: 1;
    grid-row: 1;
    position: static;
    margin: 0 0 0.9rem;
  }
  .tool-panel.shell .shell-tray button#shell-adjust { display: none; }
  .tool-panel.shell #gen-note { grid-column: 1; grid-row: 2; margin: 0 0 0.75rem; }
  .tool-panel.shell .shell-drawer,
  .no-js .tool-panel.shell .shell-drawer {
    position: static;
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    transform: none;
    box-shadow: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    margin: 0;
    min-height: 0; /* else the grid sizes the row to the full drawer */
  }
  .tool-panel.shell .shell-drawer-close { display: none; }
  .tool-panel.shell .shell-note { display: none; }
  .tool-panel.shell .sheet-wrap { grid-column: 2; grid-row: 1 / span 3; margin: 0; align-self: start; }
  /* inspect row: above .sheet-wrap in the same cell (docs) */
  .tool-panel.shell .preview-inspector-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    margin: 0;
    position: relative;
    z-index: 1;
  }
  .tool-panel.shell details.sheet-details { grid-column: 2; grid-row: 4; }
}

/* Proof Sheet palette and crop marks (contrast figures in the doc). */
@media screen {
  .shell-page {
    --paper: #e8eef4;        /* press-bed ground */
    --ink: #1d2b4f;          /* blue-black ink */
    --accent: #0079b8;       /* process cyan */
    --accent-soft: #e1f0f8;
    --focus: #0079b8;
    --mag: #c2185b;          /* registration magenta */
    --crop: 10px;
  }
  .shell-page .btn:not(.secondary) { background: var(--ink); border-color: var(--ink); }
  /* moon-calendar's #sheet is a div */
  .tool-panel.shell div#sheet > svg.sheet { display: block; width: 100%; height: auto; }
  /* Two 1px magenta ticks outside each corner, as background layers. */
  .tool-panel.shell .sheet-wrap {
    background-color: var(--panel);
    background-repeat: no-repeat;
    background-image:
      linear-gradient(var(--mag), var(--mag)), linear-gradient(var(--mag), var(--mag)),
      linear-gradient(var(--mag), var(--mag)), linear-gradient(var(--mag), var(--mag)),
      linear-gradient(var(--mag), var(--mag)), linear-gradient(var(--mag), var(--mag)),
      linear-gradient(var(--mag), var(--mag)), linear-gradient(var(--mag), var(--mag));
    background-size:
      var(--crop) 1px, 1px var(--crop), var(--crop) 1px, 1px var(--crop),
      var(--crop) 1px, 1px var(--crop), var(--crop) 1px, 1px var(--crop);
    background-position:
      left 3px top 13px, left 13px top 3px,
      right 3px top 13px, right 13px top 3px,
      left 3px bottom 13px, left 13px bottom 3px,
      right 3px bottom 13px, right 13px bottom 3px;
  }
}