/* Patient portal presentation. Shared case forms and the immutable PDF
   stylesheet remain owned by app.css and answer-print.css. */
/* The start screen spans the whole width, so its side column stands where it
   stands on every other page (--page-margin is the page's own side margin) and the
   view runs to the screen's right edge. The photograph fills the view edge to edge
   and the invitation stands on it one gutter from that edge; the view's other parts
   keep the page's right margin. */
.portal--patient > .patient-home {
  --page-margin: max(var(--gutter), (100cqw - 92rem) / 2);
  padding-block: 0 var(--main-padding);
  container-type: inline-size;
}

.side-layout--edge {
  padding-left: var(--page-margin);
}

.side-layout--edge > .side-menu {
  margin-top: var(--main-padding);
}

.side-layout--edge > .side-layout__view > :not(.home-stage) {
  margin-right: var(--page-margin);
}

.home-stage {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(26rem, 34vw, 35rem);
  align-items: center;
  justify-content: flex-end;
  padding: 1.5rem var(--gutter) 1.5rem 1.5rem;
}

.home-photograph {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.home-photograph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.home-photograph figcaption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.2rem;
  color: white;
  background: rgb(0 0 0 / 65%);
  font-size: 0.8rem;
}

.home-invitation {
  position: relative;
  width: clamp(21rem, 30vw, 28.5rem);
  max-width: 100%;
  margin: 0;
  padding: clamp(1.5rem, 2.2vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.home-invitation h1 {
  max-width: none;
  margin-bottom: 1.25rem;
  font-size: clamp(1.8rem, 2.5vw, 2.7rem);
  letter-spacing: -0.045em;
}

.home-invitation p {
  line-height: 1.6;
}

.home-entry-actions {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.home-entry-actions + .field-hint {
  margin-top: 1rem;
}

.home-journey {
  padding-block: 1.75rem 0.75rem;
}

.home-journey > h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  text-align: center;
}

.patient-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.patient-steps li {
  position: relative;
  min-width: 0;
}

.patient-steps li:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 1.25rem;
  right: calc(-50% - 0.75rem);
  left: calc(50% + 2rem);
  height: 2px;
  background: var(--primary);
  content: "";
}

.patient-steps .step-number {
  position: relative;
  z-index: 1;
  margin-bottom: 0.85rem;
  outline: 0.65rem solid var(--canvas);
}

.patient-steps h3 {
  font-size: 1rem;
}

.patient-steps p {
  max-width: 27ch;
  margin: 0.4rem auto 0;
  font-size: 0.9rem;
}

.patient-notice {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin: 2rem 0 0.5rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--soft);
}

.patient-notice__symbol {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  place-items: center;
  border: 2px solid var(--primary);
  border-radius: 50%;
  color: var(--primary);
  font-size: 1.6rem;
}

.patient-notice h2 {
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.patient-notice p {
  margin: 0;
}

.patient-notice .field-hint {
  margin-top: 0.4rem;
}

.patient-area__empty {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.patient-area__new {
  max-width: 34rem;
  margin-bottom: 1.5rem;
}

.patient-area__new {
  padding: 1.25rem 1.5rem;
}

.patient-area__new h2 {
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

.patient-area__new form[data-validity-gate] {
  display: grid;
  gap: 1.1rem;
}

.patient-area__new .radio-question {
  padding: 0;
  border: 0;
}

.patient-area__new legend {
  padding: 0 0 0.75rem;
  font-weight: 500;
}

.patient-area__new form[data-validity-gate] .button-row > .button {
  width: 100%;
}

.portal--patient .radio-options:not(.radio-options--stacked) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.information-card {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
}

.information-card p:last-child {
  margin-bottom: 0;
}

.founder-profiles {
  display: grid;
  max-width: 65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.administration-address {
  color: var(--primary);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 600;
}

.specialty-description h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.6rem, 3vw, 2rem);
}

.information-source {
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 70rem) {
  .home-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .home-photograph {
    position: relative;
    height: clamp(14rem, 43vw, 28rem);
  }

  .home-invitation {
    width: auto;
    margin: 1.5rem var(--page-margin) 0 0;
  }

  .patient-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }

  .patient-steps li::after {
    display: none;
  }
}

@media (max-width: 46rem) {
  .side-layout--edge {
    padding-left: 0;
  }

  .side-layout--edge > .side-menu {
    margin-inline: var(--page-margin);
  }

  .side-layout--edge > .side-layout__view > :not(.home-stage),
  .home-invitation {
    margin-left: var(--page-margin);
  }

  /* The row's title names the draft; its buttons say only what they do, and
     keep their full names for assistive technology. */
  .case-row__long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .patient-area__new {
    padding: 1.1rem;
  }

  .patient-notice {
    gap: 0.75rem;
    padding: 1rem;
  }

  .founder-profiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* A draft screen stays hidden until this tab holds the draft (case-tab.js); another
   tab sees a notice in its place, and a browser without JavaScript its note. */
body[data-draft-tab]:not([data-draft-tab-held]):not([data-draft-tab-shown]) main > :not(noscript) {
  visibility: hidden;
}

/* A field and the option that answers instead of it (»Ved ikke«, »ingen
   medicin«) are one answer, and the form's wider gap separates one answer from
   the next. Stacked, the option sits close under the field. Side by side, the
   option sits directly under the field's label, with the field beside both: next
   to a one-line input the label and the option form one block exactly as tall as
   the input, from its top edge to its bottom edge; next to a text area the label
   keeps the alignment of the other text-area labels. The page order stays label,
   field, option. */
.answer-group {
  display: grid;
  gap: 0.25rem;
}

@container (min-width: 34rem) {
  .answer-group {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0 0.75rem;
    align-items: start;
  }

  .answer-group + .answer-group {
    margin-top: 0.35rem;
  }

  .answer-group > .form-field {
    display: contents;
  }

  .answer-group:has(> .form-field > input) > .form-field > label,
  .answer-group:has(> .form-field > input) > .check-field label {
    line-height: 1.3;
  }

  .answer-group > .form-field > label {
    grid-column: 1;
    grid-row: 1;
  }

  .answer-group > .form-field > input,
  .answer-group > .form-field > textarea {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .answer-group > .form-field > input {
    align-self: stretch;
  }

  .answer-group > .check-field {
    grid-column: 1;
    grid-row: 2;
  }

  .answer-group:has(> .form-field > input) > .check-field input {
    margin-top: 0.05rem;
  }

  .answer-group > .form-field > .field-hint,
  .answer-group > .form-field > .field-error {
    grid-column: 2;
  }
}