/* T008 · Responsive drawers only
   S'encadena l'últim; anul·la els media queries antics que apilaven panells. */

:root {
  --drawer-width: min(340px, calc(100% - 45px));
  --toolbar-h: 38px;
  --drawer-transition: 220ms ease;
}

/* Estructura global a tots els amplades: cos fix, només panells amb scroll intern */
html, body {
  height: 100%;
}

body {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.site-header {
  min-width: 0;
}

.site-header * {
  flex-shrink: 1;
  min-width: 0;
}

.app-main {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.workspace-toolbar{display:none}
.workspace-drawer-toggle,.workspace-drawer-close{border:0;background:transparent;color:var(--green);font:600 12px var(--sans);cursor:pointer;padding:7px 10px;border-radius:6px}
.workspace-drawer-toggle[aria-expanded=true]{background:var(--soft)}
.workspace-drawer-toggle .lucide,.workspace-drawer-close .lucide{width:18px;height:18px;flex-shrink:0}
.workspace-drawer-close{align-items:center}

/* Pantalles amples: conserva les 3 columnes existents */
@media (min-width: 1200px) {
  .workspace.seed-workspace {
    min-height: 0;
    overflow: hidden;
  }
  .workspace.seed-workspace .config-scroll,
  .workspace.seed-workspace .management-scroll {
    min-height: 0;
    overflow-y: auto;
  }
  .workspace-drawer-toggle,
  .workspace-drawer-close,
  .workspace-backdrop {
    display: none !important;
  }
}

/* Pantalles estretes: previsualització central + calaixos off-canvas */
@media (max-width: 1199px) {
  .app-main {
    grid-template-rows: var(--toolbar-h) minmax(0, 1fr);
  }

  .workspace-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.75rem;
    min-height: 0;
    border-bottom: 1px solid var(--line);
    background: var(--white);
  }

  .workspace-drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 48%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .workspace.seed-workspace {
    position: relative;
    display: grid;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "preview";
    grid-template-rows:minmax(0,1fr);
    height:100%;
    align-items:stretch;
  }

  .workspace.seed-workspace > .preview-column {
    grid-area: preview;
    min-height: 0;
    min-width: 0;
    display: grid;
    height:100%;max-height:none;position:relative;top:auto;grid-column:1;grid-row:1;
  }

  .workspace.seed-workspace .paper-stage,
  .workspace.seed-workspace .paper-viewport {
    min-height: 0;
  }

  /* Els panells laterals esdevenen calaixos absoluts, mai apilats */
  .workspace.seed-workspace > aside.config.card,
  .workspace.seed-workspace > aside.management.card {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--drawer-width);
    max-width: 100%;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: var(--white);
    transition: transform var(--drawer-transition), visibility var(--drawer-transition);
    visibility: hidden;
    grid-column:auto;grid-row:auto;margin:0;max-height:none;
  }

  .workspace.seed-workspace > aside.config.card {
    left: 0;
    transform: translateX(-100%);
    border-right: 1px solid var(--line);
  }

  .workspace.seed-workspace > aside.management.card {
    right: 0;
    transform: translateX(100%);
    border-left: 1px solid var(--line);
  }

  .workspace.seed-workspace > aside.config.card.drawer-open,
  .workspace.seed-workspace > aside.management.card.drawer-open {
    transform: translateX(0);
    visibility: visible;
  }

  .workspace.seed-workspace .config-scroll,
  .workspace.seed-workspace .management-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
  }

  .workspace-drawer-close {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-end;
    margin: 0.5rem 0.5rem 0;
  }

  .workspace-backdrop {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--drawer-transition), visibility var(--drawer-transition);
  }

  .workspace-backdrop.backdrop-visible {
    opacity: 0.35;
    visibility: visible;
  }
}

/* Peu: sempre visible, pot trencar línia; amaga el lema opcional si cal */
@media (max-width: 480px) {
  .site-footer {
    flex-wrap: wrap;
  }
  .site-footer .tagline,
  .site-footer .footer-tagline {
    display: none;
  }
  .site-footer>p{display:none}
}

/* Project identity centred independently of the side actions. */
.site-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px 16px;align-items:center;height:auto;min-height:40px}
.site-footer .footer-tagline{grid-column:1;justify-self:start}
.site-footer .umbrella-project{display:block;grid-column:2;justify-self:center;margin:0;white-space:nowrap;font-size:11px}
.umbrella-project .umbrella-brand{display:inline-flex;align-items:center;gap:5px;margin-left:3px;vertical-align:middle;color:var(--green);font:700 15px/1 var(--serif);letter-spacing:-.5px;text-decoration:none}
.umbrella-brand svg{width:22px;height:22px;flex:none}
.umbrella-brand .umbrella-dot{color:var(--accent)}
.umbrella-project .umbrella-brand:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer>span:last-child{grid-column:3;justify-self:end;margin:0}
@media(max-width:1000px){.site-footer .footer-tagline{display:none}.site-footer{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
@media(max-width:600px){.site-footer{grid-template-columns:1fr;gap:2px;padding-block:6px;min-height:50px}.site-footer .umbrella-project{grid-column:1;grid-row:1}.site-footer>span:last-child{grid-column:1;grid-row:2;justify-self:center;font-size:10px}}

/* Impressió: amaga la UI introduïda */
@media print {
  body{height:auto;display:block;overflow:visible}
  .workspace.seed-workspace>aside{display:none!important}
  .workspace.seed-workspace,.workspace.seed-workspace>.preview-column,.workspace.seed-workspace .paper-stage,.workspace.seed-workspace .paper-viewport{display:contents!important;height:auto;overflow:visible;position:static}
  .workspace-toolbar,
  .workspace-drawer-toggle,
  .workspace-drawer-close,
  .workspace-backdrop {
    display: none !important;
  }
}