/* Parent portal - the public face.

   Same design language as the office app and the kindergarten build: warm
   paper, crayon accents, generous radii. Most visitors arrive on a phone, on
   a metered connection, once a term, so it has to be legible immediately and
   cheap to load. There is no second chance to explain the interface. */

.topbar {
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar__brand--link { color: inherit; text-decoration: none; }
.topbar__brand img { width: 34px; height: 34px; flex: none; }
/* The school's logo on the verify page: the same file the parent portal
   shows (the Lemar Maktab logo until a school uploads its own), at a height
   that keeps the wordmark readable in a thin bar. */
.topbar__brand img.brand-logo { width: auto; height: 42px; max-width: 120px; object-fit: contain; }
.topbar__name {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-base);
  line-height: 1.25;
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- staff sign-in ------------------------------------------------------- */

/* Matched to the language switcher beside it rather than left at .btn--sm,
   which is a size smaller.

   Copying that switcher's 8px padding is not enough, and the reason is worth
   writing down: .langswitch is a bordered GROUP wrapping unbordered buttons,
   so its outer height carries 1.5px of border top and bottom that the inner
   button never sees. Matching the button gives 37.8px against the group's
   42px - close enough to look like a mistake rather than a decision. The
   extra 2px of vertical padding here is that border difference, and it lands
   the two controls within a fifth of a pixel of each other. */
.topbar__actions .btn--solid {
  padding: 10px 13px;
  font-size: 14.5px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding: 22px 22px 64px;
}

/* --- lower grid --------------------------------------------------------- */

.portal-grid {
  margin-block-start: 20px;
  display: grid;
  gap: var(--gap);
  /* Column 1 is the leading edge - the right, in RTL. The narrow guide goes
     there and the wide results panel takes the rest, matching the school's
     own layout. */
  grid-template-columns: 21rem minmax(0, 1fr);
}
/* Source order puts results first, so on a phone - where this collapses to
   one column - the thing the parent actually came for is above the guide
   rather than below three bullet points. */
.portal-grid > .guide { order: -1; }

.guide ul {
  margin: 0;
  padding-inline-start: 20px;
  color: var(--fg-muted);
  font-size: var(--fs-base);
  line-height: 1.75;
}
.guide li + li { margin-block-start: 8px; }
.guide li::marker { color: var(--coral); }

.guide__phone {
  margin-block-start: 18px;
  padding: 14px;
  text-align: center;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
}
.guide__phone .label { margin: 0 0 3px; }
.guide__phone a {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--primary);
}

/* --- results ------------------------------------------------------------ */

.result-list { display: flex; flex-direction: column; gap: 9px; }

/* The name-tag motif from the kindergarten's "who's here" list: a punched
   hole in the school's colour, then the name. */
.result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 15px;
  text-align: start;
  font: inherit;
  color: inherit;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .result:hover { border-color: var(--coral); background: var(--coral-soft); } }

.result__name { font-weight: 700; }
.result__meta { font-size: var(--fs-sm); color: var(--fg-muted); }

/* --- report card -------------------------------------------------------- */

.card-head {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  /* minmax(0, 1fr), never a bare 1fr: `1fr` means minmax(AUTO, 1fr), and that
     auto minimum refuses to shrink below the widest table inside it. The
     column then pushes the whole page sideways and the report card scrolls
     horizontally on every phone, even though the table has its own
     overflow-x container. */
  .portal-grid { grid-template-columns: minmax(0, 1fr); }
  .portal-grid > .guide { order: 0; }
}

@media (max-width: 560px) {
  .wrap { padding-inline: 14px; }
  .topbar__inner { padding-inline: 14px; }
  .topbar__actions { width: 100%; }
  .statgrid { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}

.print-only { display: none; }

/* ======================================================================
   the entry surface

   Two panels: the school on one side, the form on the other, both inside
   one rounded frame that floats on the paper.

   It follows the theme again. The previous version pinned this page dark in
   both themes, which is why the theme button was taken out of the footer -
   it had nothing left to change. With a light surface back, it does, so it
   is back too.
   ====================================================================== */

.portal-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.portal-page .wrap { flex: 1; }

.entry {
  max-width: 68rem;
  margin-inline: auto;
  margin-block-start: clamp(12px, 4vh, 40px);
  display: grid;
  /* The showcase is the wider half by a little, the way the reference has
     it: the form is a fixed amount of content and does not grow, so the
     leftover space belongs to the picture. */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border-radius: 30px;
  background: var(--surface);
  box-shadow: var(--panel-shadow);
}

/* --- the showcase ------------------------------------------------------- */

.entry__show {
  position: relative;
  min-height: 30rem;
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  /* The palette's own sweep rather than the reference's purple and pink.
     Every stop carries the same dark ink: the worst of them is the brand
     blue at 6.30:1 for the heading and 4.88 for the line under it, which is
     why the subheading is a deepened violet-grey and not a plain mid-grey. */
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(196, 234, 251, 0.55) 0%, transparent 70%),
    radial-gradient(70% 60% at 18% 12%, rgba(207, 206, 254, 0.85) 0%, transparent 72%),
    radial-gradient(75% 70% at 30% 92%, rgba(189, 240, 208, 0.55) 0%, transparent 70%),
    linear-gradient(150deg, #cfcefe 0%, #e6e9fb 42%, #e8fbf7 100%);
}
.entry__mark {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 2px 10px rgba(32, 34, 42, 0.12);
}
.entry__mark img { width: 100%; height: 100%; object-fit: cover; }

.entry__showfoot { max-width: 26rem; }
.entry__showtitle {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 650;
  line-height: 1.18;
  color: #20222a;
}
.entry__showbody {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: #3b3f4d;
}
.entry__showbody:empty { display: none; }

/* --- the form side ------------------------------------------------------ */

.entry__form {
  padding: clamp(20px, 3vw, 38px) clamp(16px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.entry__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 650;
  line-height: 1.2;
}
.entry__sub {
  margin: 0 0 22px;
  font-size: var(--fs-base);
  color: var(--fg-muted);
}
.entry__sub:empty { display: none; }

.searchpanel {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.searchpanel .field { margin: 0; }
.searchpanel label {
  font-weight: 650;
  font-size: var(--fs-sm);
  color: var(--fg);
}
/* The help text is a sentence - how to find the access code - so it reads
   under the field rather than beside the label, where at 390px it turned a
   three-word label into three lines. */
.searchpanel .hint {
  margin-block-start: 8px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--fg-subtle);
}
.searchpanel .hint:empty { display: none; }

/* --- a field with its icon inside it ------------------------------------ */

.ifield {
  position: relative;
  margin-block-start: 7px;
}
.ifield__icon {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--fg-subtle);
  pointer-events: none;
}
.ifield__icon svg { width: 100%; height: 100%; display: block; }
.ifield input,
.ifield select {
  width: 100%;
  /* The icon is 20px at a 14px inset, so the text starts clear of it. */
  padding-inline-start: 46px;
  min-height: 52px;
  border-radius: 14px;
  background-color: var(--surface-alt);
  border: 1px solid transparent;
  color: var(--fg);
}
.ifield input:focus,
.ifield select:focus {
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(207, 206, 254, 0.26);
}
.ifield input:focus ~ .ifield__icon { color: var(--accent); }
/* The access code is Latin, so its box runs left to right - which also put
   the Pashto and Dari hint ("شش حرف") on the wrong side. In those languages
   the hint reads right to left in the body font, and a typed code stays in
   left-to-right order but sits on the right, clear of the lock icon. */
:root[dir='rtl'] .ifield input.lat { text-align: right; padding-left: 14px; padding-right: 46px; }
:root[dir='rtl'] .ifield input.lat:placeholder-shown { direction: rtl; font-family: var(--font); }

/* --- the button --------------------------------------------------------- */

.searchpanel .btn--search {
  width: 100%;
  min-height: 54px;
  margin-block-start: 5px;
  border-radius: 14px;
  font-size: 16.5px;
  font-weight: 700;
  /* The palette's brand pastel with dark ink at 6.30:1. The reference uses a
     saturated pink here and white on it; white on ours is 2.32, and there is
     no value in this set light enough to take a white label. */
  background: var(--accent);
  border-color: var(--accent);
  color: #20222a;
  box-shadow: 0 8px 22px rgba(85, 81, 255, 0.24);
}
@media (hover: hover) and (pointer: fine) { .searchpanel .btn--search:hover:not(:disabled) {
  background: #dcdbff;
  border-color: #dcdbff;
} }

/* --- the second way in -------------------------------------------------- */

/* A rule with the word sitting in a gap in it. */
.entry__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 20px 14px;
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
}
.entry__or::before,
.entry__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.entry__form .btn--alt {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  font-weight: 650;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .entry__form .btn--alt:hover { background: var(--surface-alt); } }

/* --- the school's contact line ------------------------------------------ */

.entry__contact {
  margin-block-start: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
}
.hchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* The phone number is the one thing a parent who cannot get in needs, so it
   is the only thing in this row that is not muted. */
.hchip a,
.hchip .lat {
  color: var(--primary);
  font-weight: 700;
}

/* --- footer ------------------------------------------------------------- */

.portal-foot {
  max-width: 68rem;
  width: 100%;
  margin-inline: auto;
  padding: 18px 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
}
.portal-foot__links {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  min-width: 0;
}
.portal-foot__links a {
  color: var(--fg-subtle);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .portal-foot__links a:hover { color: var(--fg); text-decoration: underline; } }
.portal-foot__sep { opacity: 0.6; }
.portal-foot .icon-btn { width: 34px; height: 34px; }
.portal-foot__lang {
  display: flex;
  align-items: center;
  gap: 9px;
}
.portal-foot__lang > svg { flex: none; }

/* The switcher is a bordered group everywhere else in the app; down here it
   reads as part of the footer text instead. */
.portal-foot .langswitch {
  border: none;
  background: none;
  padding: 0;
  gap: 2px;
}
.portal-foot .langswitch button {
  color: var(--fg-subtle);
  padding: 5px 9px;
  border-radius: 9px;
}
@media (hover: hover) and (pointer: fine) { .portal-foot .langswitch button:hover { color: var(--fg); background: var(--surface-alt); } }
.portal-foot .langswitch button[aria-pressed='true'] {
  color: #20222a;
  background: var(--accent);
}

/* --- the panels below --------------------------------------------------- */

.portal-page .portal-grid { max-width: 68rem; margin-inline: auto; }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  /* One column, showcase first. It keeps its own height rather than the
     30rem it holds beside the form, because on a phone that is most of the
     fold and the fields are what the visitor came for. */
  .entry {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
    padding: 10px;
  }
  .entry__show {
    min-height: 0;
    padding: 20px;
    gap: 34px;
  }
  .entry__showtitle { font-size: clamp(22px, 6vw, 28px); }
  .entry__form { padding: 22px 12px 10px; }
}

@media (max-width: 560px) {
  .entry { margin-inline: -6px; }
  .portal-foot { justify-content: center; text-align: center; }
}

/* Parent entry and on-screen scores share the office app's visual design.
   Screen-only report rules leave the official printed document unchanged. */
@media screen {
  .portal-page { background: var(--bg); background-image: radial-gradient(ellipse at 5% 10%, rgba(191,238,254,.25), transparent 45%), radial-gradient(ellipse at 95% 70%, rgba(200,196,255,.18), transparent 50%); }
  .parent-header { width: min(100%, 1180px); margin-inline: auto; padding: 24px 22px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .parent-brand { display: flex; align-items: center; gap: 12px; color: var(--fg); font-size: 20px; font-weight: 700; text-decoration: none; }
  .parent-brand svg { width: 28px; height: 28px; color: #35a9cd; flex: none; }
  .parent-header__actions { display: flex; gap: 14px; align-items: center; }
  .parent-header .icon-btn { width: 44px; height: 44px; background: var(--surface); border: 0; border-radius: 50%; box-shadow: 0 10px 28px rgba(65,73,97,.04); }
  .parent-header .langswitch { border: 0; background: var(--surface); border-radius: 12px; padding: 4px; }
  .parent-header .langswitch button { min-height: 36px; padding: 6px 12px; font-size: 12px; border-radius: 8px; }
  .parent-header .langswitch button[aria-pressed='true'] { background: #e6f8ff; color: #253037; }
  .portal-page .wrap { width: 100%; padding-block-start: 24px; }
  .entry { max-width: none; margin-block-start: 0; gap: 0; padding: 0; border: 1px solid var(--border); border-radius: 28px; overflow: hidden; box-shadow: 0 18px 55px rgba(58,78,105,.06); }
  .entry__show { min-height: 0; border-radius: 0; background: #e9f7fc; padding: 38px; justify-content: flex-start; gap: 26px; }
  .entry__eyebrow { font-size: 12px; color: #526c78; }
  .entry__showtitle { font-family: inherit; font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.3; margin-block-end: 18px; }
  .entry__showbody { color: #536571; font-size: 15px; line-height: 1.8; }
  .entry__art { margin-block-start: auto; max-width: 420px; }
  .entry__art svg { display: block; width: 100%; }
  .entry__form { padding: 38px 40px; }
  .entry__title { font-family: inherit; font-size: 28px; font-weight: 700; margin-block-end: 10px; }
  .entry__sub { font-size: 14px; }
  .searchpanel label { font-size: 12px; font-weight: 500; }
  .ifield input, .ifield select { border: 1px solid var(--border-strong); border-radius: 10px; background-color: var(--surface); font-size: 14px; }
  .ifield input:focus, .ifield select:focus { border-color: #35a9cd; box-shadow: 0 0 0 3px rgba(84,201,237,.15); }
  .portal-page .btn { min-height: 38px; padding: 8px 14px; border-width: 1px; border-radius: 8px; font-size: 12px; font-weight: 500; box-shadow: none; }
  .searchpanel .btn--search, .entry__form .btn--alt { min-height: 44px; font-size: 14px; border-radius: 8px; box-shadow: none; }
  .searchpanel .btn--search, .portal-page .btn--primary { background: #b9eaff; border-color: #b9eaff; color: #253037; }
  @media (hover: hover) and (pointer: fine) { .searchpanel .btn--search:hover:not(:disabled), .portal-page .btn--primary:hover:not(:disabled) { background: #a7e2f8; border-color: #a7e2f8; } }
  .entry__contact { font-size: 12px; }
  .portal-page .portal-grid { max-width: none; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 24px; margin-block-start: 24px; }
  .portal-grid > .guide { order: 0; }
  .portal-page .card { border: 0; border-radius: 22px; box-shadow: 0 10px 28px rgba(65,73,97,.04); min-width: 0; }
  .portal-page .card__head { padding: 22px 24px 16px; border: 0; gap: 12px; flex-wrap: wrap; }
  .portal-page .card__title { font-family: inherit; font-size: 20px; font-weight: 700; }
  .portal-page .card__body { padding: 20px 24px 24px; }
  .portal-page .card__head .row { gap: 10px; }
  .guide ul { font-size: 13px; line-height: 1.9; }
  .guide__phone { background: #e6f8ff; border: 0; border-radius: 14px; }
  .guide__phone .label, .guide__phone a { color: #375763; }
  .guide__phone a { font-size: 18px; }
  .result { min-height: 78px; border-radius: 12px; background: var(--surface); padding: 16px; }
  @media (hover: hover) and (pointer: fine) { .result:hover { border-color: #b9eaff; background: var(--surface-alt); } }
  .result .avatar { background: #e6f8ff; color: #375763; }
  #results { scroll-margin-top: 20px; }
  #results .idblock { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
  #results .idblock__head { gap: 14px; }
  #results .idblock__head h3 { font-family: inherit; font-size: 22px; }
  #results .idgrid { border: 0; border-radius: 10px; background: var(--border); }
  #results .idfield { padding: 14px; background: var(--surface-alt); }
  #results .idfield__label { font-size: 11px; font-weight: 500; }
  #results .idfield__value { font-size: 14px; font-weight: 600; }
  #results .section { margin-block-end: 28px; }
  #results .section__head h4 { font-family: inherit; font-size: 17px; }
  #results .tablewrap { box-shadow: none; border: 1px solid var(--border); border-radius: 12px; }
  #results table th { background: #e8f8ff; color: #42474b; font-size: 12px; font-weight: 500; padding: 16px 12px; }
  #results table td { padding: 16px 12px; font-size: 13px; border-color: var(--border); }
  #results .chip { font-size: 11px; font-weight: 500; border-radius: 14px; }
  #results .statgrid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
  #results .stat { background: #c8c4ff; color: #25272a; border: 0; border-radius: 15px; padding: 18px; min-width: 0; }
  #results .stat:nth-child(2n) { background: #fee47a; }
  #results .stat:nth-child(3n) { background: #bfeefe; }
  #results .stat.stat--fail { background: #ffe3e9; color: #9d243a; }
  #results .stat__label { color: inherit; font-size: 12px; font-weight: 500; }
  #results .stat__value { font-family: inherit; font-size: 24px; font-weight: 700; color: inherit; overflow-wrap: anywhere; }
  /* Seven results in three columns leave the last one alone on its row;
     a lone last tile takes the whole row instead. */
  #results .statgrid > .stat:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  #results .achievement { border-radius: 18px; box-shadow: none; }
  #results .stamp { border-radius: 16px; }
  .portal-foot { max-width: 1180px; }
  :root[data-theme='dark'] .entry__show { background: #293b48; }
  :root[data-theme='dark'] .entry__showtitle { color: #eef0f4; }
  :root[data-theme='dark'] .entry__showbody, :root[data-theme='dark'] .entry__eyebrow { color: #c0d2dc; }
  :root[data-theme='dark'] #results table th { background: var(--surface-alt); color: var(--fg); }
  @media (max-width: 900px) {
    .portal-page .portal-grid { grid-template-columns: minmax(0,1fr); }
    .entry { grid-template-columns: minmax(0,1fr); }
    .entry__show { padding: 24px 28px; gap: 12px; }
    .entry__showtitle { font-size: 24px; margin-block-end: 8px; }
    .entry__art { display: none; }
    .entry__form { padding: 28px; }
  }
  @media (max-width: 560px) {
    .parent-header { flex-wrap: wrap; padding-inline: 18px; }
    .parent-header__actions { width: 100%; justify-content: space-between; }
    .parent-brand { font-size: 18px; }
    .portal-page .wrap { padding-inline: 14px; }
    .entry { margin-inline: 0; }
    .entry__form { padding: 24px 20px; }
    .portal-page .card__body, .portal-page .card__head { padding: 18px; }
    #results .statgrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #results .statgrid > .stat:last-child:nth-child(3n + 1) { grid-column: auto; }
    #results .statgrid > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    #results .stat { padding: 14px; }
    /* The marks table on a phone: marks on one line, tighter cells and a
       slimmer result tag, so subject, marks, total and result all fit
       without scrolling sideways. Subject names wrap. */
    #results table.rc-marks th, #results table.rc-marks td { padding: 12px 6px; }
    #results table.rc-marks th:first-child, #results table.rc-marks td:first-child { padding-inline-start: 12px; }
    #results table.rc-marks td.num, #results table.rc-marks th.num { white-space: nowrap; }
    #results table.rc-marks .chip { padding: 3px 8px; }
    #results table.rc-marks .chip__dot { display: none; }
    #results .stat__value { font-size: 21px; }
    .result { flex-wrap: wrap; }
  }
}

.parent-brand .brand-logo { width: 120px; height: 80px; object-fit: contain; border-radius: 10px; }

/* Keep secure lookup guidance beside the fields, with results shown on search. */
.portal-page .portal-grid[hidden], .portal-page .guide[hidden] { display: none; }
.portal-page .portal-grid--lookup { grid-template-columns: minmax(0, 1fr); }

/* The school calendar for families: exam dates, then days off. */
.pcal { display: grid; gap: 22px; }
.pcal__head { margin: 0 0 10px; font-size: 15px; }
.pcal__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pcal__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-alt); }
.pcal__swatch { flex: none; width: 10px; height: 10px; margin-block-start: 7px; border-radius: 3px; background: var(--primary); }
.pcal__swatch--holiday { background: #f72585; }
.pcal__swatch--closure { background: #8d99ae; }
.pcal__swatch--exam { background: #ffb703; }
.pcal__title { font-weight: 700; }
.pcal__meta { color: var(--fg-muted); font-size: 13px; }

/* The parent portal and the verify page draw edge to edge on a phone
   (viewport-fit=cover), so the page is padded away from the notch, the
   rounded corners and the home bar - most visible with the phone on its
   side. On screens without them every inset is 0. */
body {
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

/* The verify page wears the parent portal's entry and result styles; these
   are the few parts only it has. */
.verify-results { margin-block-start: 24px; scroll-margin-top: 20px; }
.verify-results:empty { display: none; }
.verify-results .idgrid { margin-block: 18px; }
.verify-results .statgrid { margin-block: 0; }
.verify-exams { margin-block-start: 16px; }
@media screen {
  /* The fingerprint as a soft tile like the rest of the page, not a dashed
     teal box. */
  .verify-page .fingerprint-compare { border: 0; border-radius: 16px; background: #e6f8ff; padding: 22px 20px; }
  .verify-page .fingerprint-compare__label { color: #375763; }
  .verify-page .fingerprint-compare__value { color: #253037; }
  .verify-page .fingerprint-compare__hint { color: #536571; }
  :root[data-theme='dark'] .verify-page .fingerprint-compare { background: #293b48; }
  :root[data-theme='dark'] .verify-page .fingerprint-compare__label,
  :root[data-theme='dark'] .verify-page .fingerprint-compare__hint { color: #c0d2dc; }
  :root[data-theme='dark'] .verify-page .fingerprint-compare__value { color: #eef0f4; }
}