/* Affinda Share's own layout, on top of the design system's affinda.css (tokens, fonts, base).
   Text and field borders use Inkwell tints that meet WCAG AA on Ivory Paper and white. */

:root, body { background: var(--colour-brand-ivory-paper); }
body { margin: 0; color: var(--colour-brand-inkwell); }
.site { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; padding: .9rem max(1rem, env(safe-area-inset-left)); background: var(--colour-brand-white); border-bottom: 1px solid var(--colour-brand-mist-green); }
.site .brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.site .brand img { height: 22px; width: auto; }
.site .product { font-weight: var(--af-font-weight-medium, 500); }
.site nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site .who { margin-left: auto; }
main { max-width: 64rem; margin: 0 auto; padding: 2rem 1rem 4rem; display: grid; gap: 2rem; }
a { color: var(--colour-brand-inkwell); text-underline-offset: 2px; }
h1, h2 { margin: 0; line-height: 1.2; font-weight: var(--af-font-weight-medium, 500); }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
section { display: grid; gap: .75rem; }
/* Grid children may shrink below their content, so wide tables scroll inside their panel. */
main > *, section > *, .panel > * { min-width: 0; }
af-table { display: block; max-width: 100%; overflow-x: auto; }
.panel { background: var(--colour-brand-white); border: 1px solid var(--colour-brand-mist-green); border-radius: 12px; padding: 1.25rem; display: grid; gap: .75rem; }
form { display: grid; gap: .75rem; }
form.inline { display: inline; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; }
label { display: grid; gap: .25rem; font-size: .9rem; }
input, select { font: inherit; padding: .45rem .6rem; border: 1px solid var(--colour-inkwell-300); border-radius: 8px; background: var(--colour-brand-white); color: inherit; }
input[type=file] { border-style: dashed; }
.muted { color: var(--colour-inkwell-350); font-size: .9rem; }
.status { min-height: 1.2em; font-size: .9rem; }
.status.error, .danger { color: var(--status-issue); }
code { font-size: .9em; word-break: break-all; }
pre { margin: 0; padding: .75rem 1rem; overflow-x: auto; background: var(--colour-mistgreen-200); border-radius: 8px; }
pre code { word-break: normal; }
details summary { cursor: pointer; }

/* Sign-in, consent and error pages (pages.page), which have no scripts. */
.simple main { max-width: 36rem; margin: 3rem auto; gap: 1rem; }
.simple button {
  font: inherit; cursor: pointer; padding: .6rem 1.4rem; border-radius: 999px;
  border: 1px solid var(--colour-brand-inkwell); background: var(--colour-brand-inkwell);
  color: var(--colour-brand-ivory-paper);
}
.simple button[value=deny] { background: transparent; color: var(--colour-brand-inkwell); }