[hidden] { display: none !important; }

.topbar a { color: var(--accent); padding-block: .5rem; }
.guest { width: min(72rem, 100%); }
.guest h1, .guest h2 { line-height: 1.2; }
.guest h1 { margin-block: .3rem .5rem; font-size: clamp(1.8rem, 5vw, 2.7rem); }
.guest h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.guest-intro { max-width: 44rem; }
.guest-intro p { margin-block: .5rem; }
.storage-note { border-inline-start: 3px solid var(--accent); padding-inline-start: .75rem; color: var(--muted); }
.guest-feedback { min-height: 1.5em; margin-block: .75rem; }
.setup-card { max-width: 38rem; }

.guest-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: start; }
.guest form { display: grid; gap: .85rem; }
.guest label { display: grid; gap: .35rem; font-weight: 600; }
.guest input:not([type="checkbox"]), .guest select, .guest textarea {
  width: 100%;
  min-height: var(--target-size);
  padding: .6rem .75rem;
  border: 1px solid #9498a1;
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.guest textarea { resize: vertical; }
.guest :is(input, select, textarea, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.guest .choice { display: flex; min-height: var(--target-size); align-items: center; gap: .65rem; }
.guest input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.guest form button { justify-self: start; }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.quiet-action { background: none; color: var(--accent); padding-inline: .5rem; }
.service-list { display: grid; gap: .6rem; padding: 0; margin: 0; list-style: none; }
.service-list li { border: 1px solid var(--line); border-radius: var(--control-radius); padding: .85rem; }
.service-list h3 { font-size: 1rem; margin-block: .35rem; }
.service-list p { margin-block: .35rem; }
.record-tag { display: inline-block; padding: .15rem .55rem; background: var(--tint); border-radius: 1rem; font-size: .8rem; }
.record-example { border-style: dashed !important; }
.record-detail { color: var(--muted); }
.record-status { margin-block-start: .5rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; }
.option-group { padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--control-radius); }
.option-group summary { min-height: var(--target-size); padding-block: .55rem; cursor: pointer; font-weight: 650; }
.option-group[open] summary { margin-block-end: .35rem; }
.option-group summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#technical-fields { display: grid; gap: .6rem; }
.template-preview { margin-block: .35rem; padding: .75rem .85rem; background: var(--tint); border-radius: var(--control-radius); }
.template-preview :is(p, h3) { margin: .15rem 0; }
.template-preview :first-child { font-weight: 650; }
.module-core { font-weight: 650; }
.guest .module-option { padding-block: .25rem; align-items: flex-start; }
.module-option input { flex: 0 0 auto; margin-block-start: .3rem; }
.module-option small { display: block; color: var(--muted); font-weight: 400; }
.service-list dl { display: grid; gap: .25rem; margin: .45rem 0; }
.service-list dl div { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.service-list dt { font-weight: 650; }
.service-list dd { margin: 0; }
.guest dialog {
  width: min(28rem, calc(100% - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  color: var(--ink);
}
.guest dialog::backdrop { background: rgb(20 22 28 / 45%); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.danger-action { background: #a12b14; }
.guest #transfer-dialog { width: min(42rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); }
.transfer-inputs, .transfer-records { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.transfer-inputs { display: grid; gap: .85rem; }
.transfer-records legend { font-weight: 650; margin-block-end: .35rem; }
.transfer-records .choice { align-items: flex-start; padding: .45rem 0; }
.transfer-records input { flex: 0 0 auto; margin-block-start: .2rem; }
.transfer-records span { overflow-wrap: anywhere; }
#transfer-message:empty { display: none; }

@media (max-width: 760px) {
  .guest-grid { grid-template-columns: minmax(0, 1fr); }
}
