/* Shared layout vocabulary: a quiet shell around a full-height working area. */
:root { --workspace-bg: var(--bg, var(--fundo)); --workspace-ink: var(--ink, var(--tinta)); --workspace-muted: var(--muted, var(--tinta-3)); --workspace-line: var(--line, var(--linha)); --workspace-accent: var(--brand, var(--marca)); --workspace-soft: var(--soft, var(--marca-suave)); --sidebar-width: clamp(184px, 12.5vw, 216px); }
[hidden] { display: none!important; }
.app-sidebar { display: none; }
.workspace-topbar { min-height: 56px; display: flex; align-items: center; gap: 16px; padding: 8px 18px; border-bottom: 1px solid var(--workspace-line); background: var(--card, var(--cartao)); }
.workspace-title { min-width: 0; margin-inline-end: auto; }
.workspace-title > span { display: block; color: var(--workspace-muted); font-size: 9px; letter-spacing: 1px; line-height: 1.4; }
.workspace-title h1 { margin: 0; color: var(--workspace-ink); font-size: 18px; font-weight: 750; line-height: 1.3; letter-spacing: -.4px; }
.workspace-topbar > a, .workspace-topbar > button { flex-shrink: 0; }
.workspace-topbar .brand { font-size: 20px; letter-spacing: -.5px; }
.workspace-topbar .brand img, .app-sidebar .brand img { flex-shrink: 0; border-radius: 9px; }
.workspace-topbar button, .workspace-topbar .button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.workspace-topbar .icon-button { width: 34px; height: 34px; }
.workspace-menu { position: relative; border: 0; margin: 0; padding: 0; }
.workspace-menu > summary { display: flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border: 1px solid var(--workspace-line); border-radius: 9px; padding: 6px 9px; font-size: 15px; cursor: pointer; list-style: none; }
.workspace-menu > summary::-webkit-details-marker { display: none; }
.workspace-mobile-links { position: absolute; z-index: 15; inset-inline-end: 0; top: calc(100% + 8px); display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: min(275px, calc(100vw - 32px)); max-height: calc(100dvh - 80px); overflow: auto; background: var(--card, var(--cartao)); border: 1px solid var(--workspace-line); border-radius: 12px; box-shadow: 0 12px 40px #1d1a2b20; padding: 8px; }
.workspace-mobile-links a { display: flex; align-items: center; gap: 10px; padding: 10px; font-size: 13px; text-decoration: none; color: var(--workspace-ink); border-radius: 7px; }
.workspace-mobile-links svg { width: 18px; height: 18px; flex: 0 0 18px; }
.workspace-mobile-links a[aria-current=page] { background: var(--workspace-soft); color: var(--workspace-accent); }
.workspace-main { min-width: 0; }
.workspace-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 8px 12px; min-width: 0; padding: 9px 0; margin: 0; }
.workspace-toolbar .actions { margin: 0; gap: 6px; align-items: center; }
.workspace-toolbar button, .workspace-toolbar .button { min-height: 32px; padding: 6px 10px; line-height: 1.2; font-size: 12px; border-radius: 8px; }
.workspace-toolbar input, .workspace-toolbar select { min-height: 32px; padding: 5px 8px; font-size: 12px; }
.workspace-toolbar label { margin: 0; font-size: 10px; font-weight: 650; }
.workspace-toolbar .project-name { flex: 1 1 170px; max-width: 280px; min-width: 0; }
.workspace-toolbar .field-error:empty { display: none; }
.workspace-toolbar .project-name input { margin-top: 2px; }
.workspace-toolbar .example-picker { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; max-width: 260px; }
.more-actions { position: relative; margin: 0; padding: 0; border: 0; }
.more-actions > summary { list-style: none; border: 1px solid var(--workspace-line); border-radius: 8px; background: var(--card, var(--cartao)); padding: 6px 10px; font-size: 12px; font-weight: 650; cursor: pointer; }
.more-actions > summary::-webkit-details-marker { display: none; }
.more-actions > div { display: flex; flex-direction: column; gap: 5px; position: absolute; inset-inline-end: 0; top: calc(100% + 7px); z-index: 12; min-width: 170px; padding: 8px; border: 1px solid var(--workspace-line); border-radius: 10px; background: var(--card, var(--cartao)); box-shadow: 0 8px 28px #1d1a2b20; }
.workspace-status { margin: 0; padding: 4px 0; font-size: 11px; line-height: 1.4; color: var(--workspace-muted); }
.workspace-status:empty { display: none; }
.workspace-help { width: min(880px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 22px; border: 1px solid var(--workspace-line); border-radius: 16px; background: var(--card, var(--cartao)); color: var(--workspace-ink); overflow: auto; }
.workspace-help::backdrop { background: #1d1a2b66; }
.workspace-help-heading { display: flex; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.workspace-help-heading h2 { margin: 0; font-size: 22px; }
.workspace-help h3 { margin: 18px 0 8px; }
.workspace-help p { font-size: 13px; line-height: 1.6; }
.workspace-help .hint { display: block!important; font-size: 12px!important; }
.workspace-help .guide, .workspace-help .faq, .workspace-help .guides, .workspace-help .sources { margin: 18px 0 0; padding: 0; border: 0; }
.workspace-help .guide-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 15px; }
.field-page-tabs { display: flex; gap: 4px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--workspace-line); }
.field-page-tabs button { min-height: 30px; flex: 1; padding: 5px 7px; font-size: 11px; line-height: 1.3; border-radius: 7px; background: transparent; border: 1px solid transparent; color: var(--workspace-muted); }
.field-page-tabs button[aria-selected=true] { background: var(--workspace-soft); border-color: var(--workspace-soft); color: var(--workspace-accent); font-weight: 750; }
.field-page { min-width: 0; }
.list-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 3px; padding-top: 5px; border-top: 1px solid var(--workspace-line); }
.list-pagination button { min-height: 29px; min-width: 34px; padding: 3px 7px; line-height: 1; }
.list-pagination span[aria-live] { font-size: 11px; color: var(--workspace-muted); }

.language-switcher { position: relative; flex-shrink: 0; margin: 0; padding: 0; border: 0; }
.language-switcher > summary { display: flex; align-items: center; gap: 6px; min-width: 36px; min-height: 36px; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--workspace-line); border-radius: 9px; font-size: 12px; cursor: pointer; list-style: none; color: var(--workspace-ink); }
.language-switcher > summary::-webkit-details-marker { display: none; }
.language-switcher nav { position: absolute; z-index: 16; inset-inline-end: 0; top: calc(100% + 8px); width: min(250px, calc(100vw - 32px)); max-height: min(70dvh, 520px); overflow: auto; background: var(--card, var(--cartao)); border: 1px solid var(--workspace-line); border-radius: 12px; box-shadow: 0 12px 40px #1d1a2b20; padding: 6px; }
.language-switcher ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.language-switcher a { display: block; padding: 8px 10px; border-radius: 7px; font-size: 13px; line-height: 1.35; text-decoration: none; color: var(--workspace-ink); }
.language-switcher a:hover { background: var(--workspace-bg); }
.language-switcher a[aria-current=page] { background: var(--workspace-soft); color: var(--workspace-accent); font-weight: 750; }

@media screen and (min-width: 1000px) {
  .workspace-ready .app-sidebar { position: fixed; z-index: 10; inset-block: 0; inset-inline-start: 0; display: flex; flex-direction: column; width: var(--sidebar-width); height: 100dvh; background: var(--card, var(--cartao)); border-inline-end: 1px solid var(--workspace-line); }
  .app-sidebar > .brand { display: flex; align-items: center; gap: 8px; min-height: 57px; flex-shrink: 0; padding: 10px 13px; border-bottom: 1px solid var(--workspace-line); font-size: 21px; font-weight: 800; letter-spacing: -.8px; text-decoration: none; color: var(--workspace-ink); }
  .app-sidebar-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px 10px; }
  .app-sidebar nav { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin: 0; }
  .app-sidebar h2 { padding: 0 10px; margin: 0 0 10px; font-size: 9px; letter-spacing: 1.2px; color: var(--workspace-muted); text-transform: uppercase; }
  .app-sidebar nav + h2 { margin-top: 24px; }
  .app-sidebar nav a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 10px; border: 0; border-radius: 8px; font-size: 12px; line-height: 1.4; color: var(--workspace-muted); font-weight: 550; text-decoration: none; }
  .app-sidebar nav a:hover { background: var(--workspace-bg); color: var(--workspace-ink); }
  .app-sidebar nav a[aria-current=page] { background: var(--workspace-soft); color: var(--workspace-accent); font-weight: 750; }
  .app-sidebar nav svg { flex: 0 0 18px; width: 18px; height: 18px; }
  .app-sidebar-note { padding: 14px 16px; border-top: 1px solid var(--workspace-line); color: var(--workspace-muted); font-size: 10px; line-height: 1.6; }
  .app-sidebar-note strong { display: block; font-size: 11px; color: var(--workspace-ink); }
  .workspace-ready > .workspace-topbar { margin-inline-start: var(--sidebar-width); }
  .workspace-ready .workspace-topbar > .brand, .workspace-ready .workspace-menu { display: none; }
  .workspace-ready > .workspace-main { width: calc(100% - var(--sidebar-width)); max-width: none; margin: 0; margin-inline-start: var(--sidebar-width); padding: 0 14px; }
}
@media screen and (min-width: 1000px) and (min-height: 600px) {
  .workspace-ready > .workspace-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: calc(100dvh - 57px); padding-bottom: 8px; }
  .workspace-ready .workspace-pages { min-height: 0; }
  .workspace-ready .workspace-toolbar { flex-wrap: nowrap; }
  .workspace-ready input, .workspace-ready select { min-height: 32px; padding: 5px 7px; font-size: 13px; }
  .workspace-ready input[type=checkbox] { min-height: 18px; width: 18px; height: 18px; padding: 0; }
  .workspace-ready label { font-size: 11px; line-height: 1.4; }
  .workspace-ready .hint { font-size: 11px; line-height: 1.4; }
  .workspace-ready .workspace-detail { display: none; }
  .workspace-ready > .site-footer, .workspace-ready > .footer { display: none; }
}
@media screen and (max-width: 999px) {
  .language-current { display: none; }
  /* Menus open under the whole bar, so long labels or RTL wrapping never push them off screen. */
  .workspace-topbar { position: relative; }
  .language-switcher { position: static; }
  .language-switcher nav { inset-inline: 12px; width: auto; top: calc(100% - 4px); }
  .workspace-menu { position: static; }
  .workspace-mobile-links { inset-inline-end: 12px; top: calc(100% - 4px); }
  .workspace-topbar { gap: 10px; padding-inline: 16px; }
  .workspace-title > span { display: none; }
  .workspace-title h1 { font-size: 15px; }
  .workspace-topbar .brand { font-size: 17px; }
  .workspace-topbar .brand img { width: 28px; height: 28px; }
  .workspace-ready > .workspace-main { width: auto; max-width: none; padding: 0 16px; }
  .workspace-ready .workspace-toolbar { padding-block: 12px; }
  .workspace-ready .workspace-toolbar button, .workspace-ready .workspace-toolbar .button { min-height: 40px; }
  .workspace-ready .workspace-toolbar .project-name { max-width: none; }
  .workspace-ready .workspace-toolbar .example-picker { max-width: none; width: 100%; }
  .field-page-tabs button { min-height: 40px; }
}
@media screen and (max-width: 480px) {
  .workspace-topbar { flex-wrap: wrap; }
  .workspace-title { order: 4; flex-basis: calc(100% - 20px); padding: 1px 0 3px; }
  .workspace-topbar .brand { margin-inline-end: auto; }
  .workspace-toolbar .project-name { flex-basis: 100%; }
  .workspace-topbar .header-library { font-size: 11px; }
}
@media print {
  .app-sidebar, .workspace-topbar, .workspace-toolbar, .workspace-help, .list-pagination, .field-page-tabs { display: none!important; }
  [data-list-hidden] { display: table-row!important; }
  .recipe-list > [data-list-hidden], .scenario-list > [data-list-hidden] { display: block!important; }
}