/* Page layout only. Everything visual comes from the App8 design system (static/ds). */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: Comfortaa, system-ui, sans-serif; font-weight: 500; }

.a8-logo-link { text-decoration: none; display: inline-flex; }
.a8d-spacer { flex: 1 1 auto; }
.a8d-nav-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.a8d-nav-end form { margin: 0; }
.a8d-person { font-size: 14px; font-weight: 700; }

.a8d-shell { display: flex; flex-wrap: wrap; align-items: flex-start; max-width: 1440px; margin: 0 auto; }
.a8d-sidenav { flex: 1 1 220px; max-width: 280px; padding: var(--space-6) var(--space-4); box-sizing: border-box; }
.a8d-sidenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.a8d-disabled { color: var(--ink-disabled); cursor: default; }
.a8d-disabled svg { color: var(--ink-disabled); }
.a8d-disabled:hover { background: none; }
.a8d-main { flex: 999 1 560px; min-width: 0; padding: var(--space-6) var(--space-8) var(--space-12); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-6); }
.a8d-title { margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; }
.a8d-lead { margin: 6px 0 0; color: var(--ink-muted); font-size: 16px; line-height: 26px; }
.a8d-footer { max-width: 1440px; margin: 0 auto; padding: var(--space-6) var(--space-8); font-size: 13px; color: var(--ink-muted); }

.a8d-center { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-6) var(--space-4); box-sizing: border-box; }
.a8d-login-lang { display: flex; justify-content: center; }
.a8-signin-title { margin: 0; text-align: center; }
.a8-signin-foot { text-align: center; font-size: 14px; }
.a8-signin-foot .a8-link { display: inline-flex; align-items: center; gap: 6px; }
.a8d-message { width: min(520px, 100%); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) var(--space-6); }
.a8d-message-logo { display: flex; justify-content: center; }

@media (max-width: 720px) {
  .a8d-sidenav { max-width: none; padding-bottom: 0; }
  .a8d-main { padding: var(--space-5) var(--space-4) var(--space-8); }
  .a8d-person { display: none; }
}

/* Tokens the design system's CSS files do not define yet. */
:root { --app8-logo: #FF8800; }

/* Lists, cards and forms (M2) */
.a8d-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.a8d-pagehead > div { flex: 1 1 300px; }
.a8d-listcard, .a8d-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.a8d-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.a8d-search { flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink-muted); box-sizing: border-box; }
.a8d-search input { flex: 1; border: 0; outline: none; font: inherit; font-size: 14px; color: var(--ink); background: transparent; min-width: 0; }
.a8d-search:focus-within { box-shadow: var(--focus-ring); }
.a8d-count { margin: 0 0 var(--space-3); font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.a8d-tablewrap { overflow-x: auto; }
.a8d-tablewrap .a8-table { min-width: 640px; }
.a8d-num { text-align: end !important; }
.a8d-strong { font-weight: 700; color: var(--ink); text-decoration: none; }
.a8d-sub { font-size: 13px; color: var(--ink-muted); }
.a8d-muted { color: var(--ink-muted); }
.a8d-rowlink { cursor: pointer; }
.a8d-rowlink:hover td { background: var(--surface-sunken); }
.a8d-rowactions { display: inline-flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.a8d-rowactions .a8-btn { min-height: 36px; }
.a8d-danger { color: var(--danger); }
.a8d-iconbtn { padding: 0 8px; min-width: 40px; justify-content: center; }
.a8d-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; margin-bottom: var(--space-2); }
.a8d-form { display: flex; flex-direction: column; gap: var(--space-4); }
.a8d-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); }
.a8d-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); }
.a8d-switches .a8-hint, .a8d-form .a8-hint { margin: 6px 0 0; }
.a8d-actions { display: flex; justify-content: flex-end; }
.a8d-subhead { margin: var(--space-2) 0 0; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ink); }
.a8d-addrow { display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.a8d-addgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); align-items: end; }
.a8d-addbtn { justify-content: center; }
.a8d-dialog { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.a8d-dialog-body { display: flex; flex-direction: column; gap: var(--space-4); }
.a8d-linkbox .a8-alert-body { min-width: 0; flex: 1; }
.a8d-copyrow { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.a8d-copyrow .a8-input { flex: 1 1 240px; min-width: 0; font-size: 13px; }
.a8d-center-text { margin: 0; text-align: center; color: var(--ink-muted); }
.a8d-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); }
.a8d-tile { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); text-decoration: none; color: var(--ink); }
.a8d-tile-icon { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.a8d-tile-value { display: block; font-size: 22px; line-height: 30px; font-weight: 700; }
.a8d-tile-label { display: block; font-size: 13px; color: var(--ink-muted); font-weight: 600; }
a.a8d-tile:hover { box-shadow: var(--shadow-lg); }

/* Sign-in with a code, settings and mail templates (0.3.0) */
.a8d-codeinput { font-size: 24px; letter-spacing: 6px; text-align: center; font-family: var(--font-mono, monospace); }
.a8d-signin-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; font-size: 14px; }
.a8d-mono { font-family: var(--font-mono, monospace); font-size: 13px; word-break: break-word; }
.a8d-small { font-size: 12px; }
.a8d-check { margin-top: 8px; font-size: 14px; }
.a8d-paircode { justify-content: flex-start; margin: var(--space-3) 0; }
.a8d-codebox .a8-alert-body { min-width: 0; flex: 1; }
.a8d-actions-split { justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.a8d-actions-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.a8d-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--space-6); align-items: start; }
.a8d-code-editor { font-family: var(--font-mono, monospace); font-size: 13px; line-height: 20px; min-height: 460px; width: 100%; box-sizing: border-box; white-space: pre; overflow: auto; tab-size: 2; }
.a8d-placeholder { font-family: var(--font-mono, monospace); font-size: 12px; background: var(--surface-sunken); border-radius: 6px; padding: 1px 6px; margin: 0 2px; }
.a8d-preview { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #FFFFFF; }
.a8-tabs a.a8-tab { text-decoration: none; display: inline-flex; align-items: center; }

/* Sites (0.4.0) */
.a8d-cardhead-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.a8d-badgelink { text-decoration: none; }
.a8d-badgelink:hover { text-decoration: underline; }
.a8d-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.a8d-step { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.a8d-stepicon { width: 28px; height: 28px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--ink-muted); flex: none; }
.a8d-stepicon.a8d-ok { background: var(--success-soft); color: var(--success); }
.a8d-stepicon.a8d-bad { background: var(--danger-soft); color: var(--danger); }
.a8d-stepicon.a8d-now { background: var(--accent-soft); color: var(--accent); }
.a8d-kv { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px var(--space-5); font-size: 14px; line-height: 22px; align-items: center; }
.a8d-kv dt { color: var(--ink-muted); }
.a8d-kv dd { margin: 0; min-width: 0; }
.a8d-kv-split { grid-template-columns: max-content minmax(0, 1fr); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.a8d-kv-split dd { text-align: end; overflow-wrap: anywhere; }
.a8d-sitecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--space-6); align-items: start; }
.a8d-sitecard { padding: var(--space-6); gap: var(--space-4); }
.a8d-sitecard-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.a8d-sitecard-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; }
.a8d-minw0 { min-width: 0; }
.a8d-break { word-break: break-all; font-size: 14px; }
.a8d-nomargin { margin: 0; }
.a8d-actions-gap { flex-wrap: wrap; gap: var(--space-2); }
.a8d-inlineform { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.a8d-inlineform .a8-field { flex: 1 1 300px; }
.a8d-inlineform > .a8-btn { margin-top: 28px; }
.a8d-readonly { min-height: 40px; display: flex; align-items: center; }
.a8d-todo { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 24px; }
@media (max-width: 720px) { .a8d-inlineform > .a8-btn { margin-top: 0; } .a8d-sitecard { padding: var(--space-5); } }

/* Pages and files (0.5.0) */
.a8d-more { position: relative; display: inline-block; }
.a8d-more > summary { list-style: none; cursor: pointer; }
.a8d-more > summary::-webkit-details-marker { display: none; }
.a8d-moreform { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(340px, 80vw); text-align: start; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.a8d-uploadform { margin: 0; }
.a8d-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-6); border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; text-align: center; color: var(--ink-muted); }
.a8d-dropzone:hover, .a8d-dropzone:focus-within { border-color: var(--accent); color: var(--accent); }
.a8d-fileinput { position: absolute; width: 1px; height: 1px; opacity: 0; }
.a8d-filelist { display: flex; flex-direction: column; gap: var(--space-3); }
.a8d-filegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); }
.a8d-file { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); display: flex; flex-direction: column; }
.a8d-filethumb { height: 130px; display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--ink-muted); }
.a8d-filethumb img { width: 100%; height: 100%; object-fit: cover; }
.a8d-file figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.a8d-filename { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a8d-fileactions { display: flex; gap: 4px; justify-content: flex-end; }
.a8d-fileactions .a8-btn { min-height: 32px; padding: 0 8px; }
.a8d-hiddencopy { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Client tree, deleting, log, viewing as a client (0.6.0) */
.a8d-switcher { margin: 0; }
.a8d-switcher .a8-select { min-width: 200px; max-width: 320px; }
.a8d-impbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); padding: 10px var(--space-4); background: var(--warning-soft); color: var(--ink); font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--line); }
.a8d-impbar form { margin: 0; }
.a8d-impbtn { min-height: 32px; }
.a8d-indent { display: inline-flex; align-items: center; gap: 6px; }
.a8d-indent svg { color: var(--ink-muted); flex: none; }
.a8d-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-2); font-size: 14px; font-weight: 700; }
.a8d-crumbs .a8-link { display: inline-flex; align-items: center; gap: 6px; }
.a8d-crumbsep { color: var(--ink-muted); }
.a8d-checklist { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.a8d-checkrow { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; }
.a8d-checkrow input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.a8d-checkrow:hover { background: var(--surface-sunken); }
.a8d-dangercard { border-color: var(--danger); }
.a8d-impact { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; line-height: 24px; }
.a8d-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-4); }
.a8d-usage-item { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 4px; }
.a8d-usage-value { font-size: 20px; line-height: 28px; font-weight: 700; }
.a8d-usage-label { font-size: 13px; color: var(--ink-muted); font-weight: 600; }
.a8d-over { border-color: var(--warning); background: var(--warning-soft); }
.a8d-pager { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.a8d-nowrap { white-space: nowrap; }
.a8d-sidenav .a8-sidenav-link svg { flex: none; }
.a8d-pendingcard { border-color: var(--warning); }
.a8d-nowrapflex { flex-wrap: nowrap; }
.a8d-langtabs { align-self: flex-start; flex-wrap: wrap; }
.a8d-transl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.a8d-transbtn { min-height: 28px; padding: 0 8px; font-size: 13px; }
.a8d-langlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.a8d-transl { flex-wrap: nowrap; }
/* Pages list: rows that wrap on smaller screens instead of a wide table */
.a8d-pagelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.a8d-pagerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.a8d-pr-main { flex: 1 1 220px; min-width: 0; }
.a8d-pr-addr { flex: 0 1 140px; }
.a8d-pr-state { flex: 0 1 210px; }
.a8d-pr-label { display: none; }
.a8d-pr-actions { margin-left: auto; flex-wrap: nowrap; }
@media (max-width: 720px) {
  .a8d-pr-actions { margin-left: 0; flex-wrap: wrap; width: 100%; justify-content: flex-start; }
  .a8d-pr-actions .a8d-more[open] { flex-basis: 100%; }
  .a8d-pr-actions .a8d-moreform { position: static; width: 100%; margin-top: var(--space-2); box-shadow: none; }
}

/* Brand colours card */
.a8d-brandgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.a8d-brandgrid .a8-color-custom .a8-input { width: 100%; min-width: 0; }
.a8d-subtitle { font-size: 16px; margin: var(--space-5) 0 var(--space-1); }

/* Templates */
.a8d-tplgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.a8d-tplcard { padding: 0; gap: 0; overflow: hidden; }
.a8d-tplthumb { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.a8d-tplthumb iframe { position: absolute; top: 0; left: 0; width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; background: #FFFFFF; }
.a8d-tplbody { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4) var(--space-4) 0; min-width: 0; }
.a8d-tplname { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.a8d-tplactions { padding: var(--space-3) var(--space-4) var(--space-4); flex-wrap: wrap; justify-content: flex-start; }
.a8d-sharelist { max-height: 50vh; overflow-y: auto; }
.a8d-tplpreview { height: 100vh; display: flex; flex-direction: column; background: var(--surface-sunken); }
.a8d-tplpreview .a8d-edbar { display: flex; align-items: center; gap: var(--space-3); padding: 8px var(--space-4); background: var(--surface-raised); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.a8d-tplpreview .a8d-edpages { flex: 0 1 260px; min-width: 140px; }
.a8d-tplpreview .a8d-spacer { flex: 1 1 0; }
.a8d-tplpv-name { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.a8d-tplframe { flex: 1; min-height: 0; display: flex; justify-content: center; padding: var(--space-3); }
.a8d-tplframe iframe { width: 100%; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); background: #FFFFFF; transition: width .2s ease; }
.a8d-radios { display: flex; flex-direction: column; gap: var(--space-2); }
.a8d-tplpick { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--line); }
.a8d-tplpick .a8-link { flex: none; display: inline-flex; align-items: center; gap: 4px; padding-top: 12px; font-size: 14px; }
.a8d-dialog-wide { width: min(640px, calc(100vw - 32px)); max-width: 640px; }
.a8-field[hidden] { display: none; }