/* KEB BASE design system. Screen-only rules leave the existing QR/desk print sheets intact. */
@media screen {
  :root {
    --brand: #4dbbff;
    --brand-hover: #36b2fa;
    --brand-ink: #123c58;
    --action: #0878b9;
    --action-hover: #06649a;
    --action-ink: #fff;
    /* Keep the legacy action token for existing component styles. */
    --navy: #153c57;
    --teal: #006da8;
    --muted: #5b7080;
    --line: #d9e4ec;
    --paper: #ffffff;
    --canvas: #f5f8fb;
    --soft: #edf5fc;
    --ink: #18364b;
    --accent: #006da8;
    --radius: 18px;
    --shadow: 0 4px 22px #193e6010;
  }
  * { box-sizing: border-box; }
  body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
  a { color: var(--teal); text-underline-offset: 4px; }
  h1,h2,h3,p { overflow-wrap: anywhere; }
  h1,h2,h3 { line-height: 1.5; letter-spacing: .015em; }
  h1 { font-size: clamp(24px,2.6vw,34px); font-weight: 750; }
  h2 { font-size: 21px; }
  h3 { font-size: 17px; }
  h1:focus { outline: none; }
  small,.muted,.footnote { color: var(--muted); }
  .eyebrow { color: var(--muted); font-size: 10px; letter-spacing: .16em; font-weight: 700; margin: 0 0 9px; }
  button,input,select,textarea { font: inherit; }
  button,.button-link { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); border-radius: 10px; min-height: 46px; padding: 10px 16px; background: white; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.5; cursor: pointer; transition: background .15s, border-color .15s; }
  button:hover:not(:disabled),.button-link:hover { background: var(--soft); border-color: #91b3cc; }
  button.primary,.button-link.primary { background: var(--action); border-color: var(--action); color: var(--action-ink); box-shadow: 0 2px 3px #16466a15; }
  button.primary:hover:not(:disabled),.button-link.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
  button.danger { color: #a53232; border-color: #e5bcbc; background: #fff9f8; }
  button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
  .button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  :focus-visible { outline: 3px solid #006da8; outline-offset: 3px; }
  input,select,textarea { width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border: 1px solid #b5c9d8; border-radius: 9px; background: #fff; color: var(--ink); font-size: 16px; }
  /* Native date controls must shrink inside grid tracks, labels and fieldsets. */
  form,fieldset,label,.form-grid>* { min-width:0; min-inline-size:0; }
  input:is([type=date],[type=time],[type=datetime-local]) { display:block; appearance:none; -webkit-appearance:none; box-sizing:border-box; width:100%; max-width:100%; min-width:0; min-inline-size:0; }
  input::-webkit-date-and-time-value { min-width:0; text-align:left; }
  input::-webkit-datetime-edit { min-width:0; padding:0; }
  input::placeholder,textarea::placeholder { color: #637c8e; }
  select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2337556b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
  label { color: #37556b; font-size: 13px; font-weight: 600; gap: 7px; }
  textarea { min-height: 120px; resize: vertical; }
  input[type=checkbox],input[type=radio] { accent-color: var(--teal); }
  .check { font-weight: 400; align-items: flex-start; }
  .check input { flex-shrink: 0; margin-top: 2px; min-height: 22px; }
  .trial { background: #e8f3fc; color: #365b75; padding: 5px 20px; font-size: 11px; text-align: center; letter-spacing: .03em; }
  body>header { min-height: 78px; padding: 18px max(24px,calc((100% - 1100px)/2)); border-bottom: 1px solid var(--line); }
  .brand { display:inline-flex; align-items:center; flex:0 0 auto; min-height:44px; color:#006da8; text-decoration:none; }
  .brand-logo { display:block; width:180px; height:auto; aspect-ratio:9/2; object-fit:contain; }
  .ui-icon { width: 21px; height: 21px; flex: 0 0 auto; vertical-align: middle; }
  .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: none; }
  .panel h2:first-child,.panel h3:first-child { margin-top: 0; }
  .tag { background: var(--soft); color: #375d77; border-radius: 7px; padding: 4px 10px; font-size: 12px; }
  .empty { padding: 38px 22px; border: 1px dashed #c7d9e6; background: #fbfdff; border-radius: 14px; text-align: center; color: var(--muted); }
  .footnote { font-size: 12px; line-height: 1.9; }
  details { border-top: 1px solid var(--line); padding: 15px 0; }
  summary { min-height: 34px; padding: 4px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
  details[open]>summary { margin-bottom: 15px; }
  .skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; padding: 12px 20px; border-radius: 8px; background: white; }
  .skip-link:focus { top: 12px; }

  /* Application shell: businesses remain peers, separate from project navigation. */
  .workspace-app .app-header { padding: 15px 32px; gap: 26px; }
  .header-caption { font-size: 12px; color: #62788a; margin-right: auto; }
  #account { display: flex; gap: 10px; align-items: center; font-size: 13px; }
  #account>span { font-weight: 600; }
  #account button { background: transparent; min-height: 40px; font-size: 12px; padding: 8px 12px; }
  .app-main { max-width: 1600px; padding: 0; margin: 0 auto; }
  #workspace { display: grid; grid-template-columns: 222px minmax(0,1fr); min-height: calc(100vh - 106px); }
  .hub-navigation { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 34px 18px; margin: 0; background: #edf5fc; border-right: 1px solid var(--line); }
  .hub-navigation a { display: flex; align-items: center; gap: 11px; padding: 12px; color: #48657b; font-size: 14px; text-decoration: none; border-radius: 9px; line-height: 1.6; }
  .hub-navigation a:hover { background: #deeffc; }
  .hub-navigation a[aria-current=page],.hub-navigation a[data-active=true] { color: #006da8; background: white; font-weight: 700; box-shadow: 0 2px 7px #244b6a09; }
  .hub-navigation .nav-caption { margin: 0 12px 12px; font-size: 10px; letter-spacing: .12em; color: #58738a; font-weight: 700; }
  .hub-navigation .business-caption { margin-top: 32px; }
  .business-links { display: grid; gap: 6px; }
  .business-links a { align-items: flex-start; }
  .business-links .ui-icon { margin-top: 2px; }
  .business-switcher { margin: 18px 6px 8px; }
  .business-switcher select { background: transparent; font-size: 12px; min-height: 42px; }
  #common-settings { margin-top: 30px; border-top: 1px solid var(--line); }
  .nav-footnote { margin: auto 12px 0; padding-top: 50px; font-size: 9px; line-height: 1.8; color: #607b90; letter-spacing: .14em; }
  .workspace-content { min-width: 0; padding: 25px 36px 30px; }
  .scope-trail { font-size: 12px; gap: 9px; margin: 0 0 26px; color: #60778a; }
  .scope-trail a { color: #60778a; }
  .workspace-head { align-items: flex-start; margin-bottom: 26px; gap: 20px; }
  .workspace-head h1 { margin: 3px 0 0; }
  .workspace-head>.flow-actions { margin: 0; }
  .workspace-content>.footnote { margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line); }
  .project-bar.panel { border: 0; padding: 0 0 22px; background: none; margin-bottom: 0; gap: 20px; }
  .project-bar label { flex: 1; max-width: 450px; }
  #project-info { font-size: 13px; }
  .event-nav { padding: 0; margin: 0 0 28px; gap: 4px; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .event-nav button { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1 0 auto; min-height: 55px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 13px 14px; background: transparent; font-size: 13px; color: var(--muted); }
  .event-nav button[aria-current=page] { color: #006da8; background: transparent; border-bottom-color: var(--teal); font-weight: 750; }
  .event-nav .ui-icon { width: 17px; height: 17px; }
  .event-toolbar { gap: 10px; margin-bottom: 18px; }
  .event-toolbar h2 { margin: 0 auto 0 0; }
  .flow-actions { gap: 10px; }

  /* Whole-KEB overview and business landing pages. */
  .home-welcome { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: -12px 0 28px; }
  .home-welcome p { margin: 0; color: var(--muted); }
  .home-date { white-space: nowrap; font-size: 12px; background: white; border: 1px solid var(--line); padding: 7px 12px; border-radius: 8px; }
  .hub-section-title h2 { font-size: 17px; }
  .business-grid { gap: 20px; }
  .business-card { position: relative; min-height: 265px; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; background: white; box-shadow: var(--shadow); color: var(--ink); overflow: hidden; }
  .business-card:before { content: ''; position: absolute; height: 4px; top: 0; left: 0; right: 0; background: var(--brand); }
  .business-card.business-choir { border-top-color: var(--line); }
  .business-card.business-choir:before { display:none; }
  .business-card:hover { border-color: #80b7d9; transform: none; background: #fbfdff; }
  .business-card-head { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 15px; }
  .business-card-head>.ui-icon { width: 40px; height: 40px; padding: 9px; background: #e8f5ff; color: #006da8; border-radius: 12px; }
  .business-choir .business-card-head>.ui-icon { background: #eaf6f1; color: #00856a; }
  .business-type { font-size: 11px; letter-spacing: .04em; color: #5b7183; margin-bottom: 0; }
  .business-card h2 { margin: 22px 0 10px; font-size: clamp(21px,2vw,25px); }
  .business-card>p { font-size: 13px; color: var(--muted); margin: 0 0 25px; }
  .business-card-foot { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding-top: 17px; border-top: 1px solid var(--line); margin-top: auto; }
  .business-count { font-size: 14px; font-weight: 650; }
  .business-enter { display: inline; width: auto; margin: 0; padding: 0; border: 0; font-size: 13px; color: var(--teal); white-space: nowrap; }
  .hub-add { margin: 18px 0 30px; }
  .hub-add button { background: transparent; border-style: dashed; }
  .hub-add .muted { font-size: 12px; }
  .hub-bottom { gap: 20px; }
  .hub-bottom h2 { font-size: 17px; }
  .hub-bottom h2 small { font-size: 12px; margin-left: 5px; font-weight: 500; }
  .hub-row { padding: 17px 0; border-radius: 0; min-height: 92px; }
  button.hub-row:hover { background: #f3f9fd; border-color: var(--line); }
  .hub-row strong { font-size: 15px; }
  .scope-label { font-size: 11px; }
  .hub-row small { font-size: 12px; }
  .activity-grid { gap: 18px; }
  .activity-card { padding: 25px; background: white; border-radius: var(--radius); border-color: var(--line); }
  .activity-card>span { font-size: 12px; color: var(--muted); }
  .activity-card h3 { margin: 14px 0 9px; font-size: 19px; }
  .activity-card>strong { display: block; margin-top: 22px; color: var(--teal); font-size: 13px; }
  .settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .settings-grid p { color: var(--muted); font-size: 14px; }
  .settings-grid button { margin-top: 10px; }

  /* Event overview: the order follows preparation, participation and arrival. */
  .event-hero { box-shadow: inset 0 4px 0 var(--brand); background: #153f60; color: #fff; border-radius: var(--radius); padding: 28px 32px; margin-bottom: 24px; }
  .event-hero .eyebrow { color: #aadafa; }
  .event-hero h2 { font-size: 23px; margin: 6px 0 12px; }
  .event-hero p { color: #dcecf8; }
  .event-hero>span { display: inline-block; font-size: 12px; padding: 4px 11px; border: 1px solid #5486a7; border-radius: 6px; }
  .event-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
  .event-card { padding: 22px; min-height: 178px; gap: 8px; border-radius: 15px; font-weight: 400; align-items: flex-start; }
  .event-card>.ui-icon { color: var(--teal); margin-bottom: 8px; width: 23px; height: 23px; }
  .event-card strong { font-size: 18px; line-height: 1.5; }
  .event-card small { line-height: 1.8; font-size: 12px; }
  .event-card .card-step { color: var(--teal); font-size: 10px; letter-spacing: .08em; }
  .next-action { display: flex; align-items: center; gap: 20px; justify-content: space-between; background: #e8f5ff; border: 1px solid #badcf3; border-radius: var(--radius); padding: 23px 26px; }
  .next-action p { margin: 5px 0 0; color: #3b617c; font-size: 13px; }
  .next-action h2 { margin: 0; font-size: 18px; }
  .next-action button { flex-shrink: 0; }
  .event-form fieldset { border-color: var(--line); border-radius: 15px; background: white; padding: 25px; margin-bottom: 22px; }
  .event-form legend { font-size: 16px; color: #295c7c; font-weight: 700; padding: 0 8px; }
  .save-bar { z-index: 3; padding: 16px 20px; border: 1px solid var(--line); background: #fffffff5; backdrop-filter: blur(12px); box-shadow: 0 -4px 22px #193e6010; border-radius: 12px; }
  #edit-state { font-size: 12px; margin-right: auto; }
  .work-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0 18px; }
  .work-tabs button { padding: 9px 14px; min-height: 43px; background: transparent; font-size: 13px; border-color: var(--line); }
  .work-tabs button[aria-pressed=true] { color: white; background: var(--teal); border-color: var(--teal); }
  .work-note { background: #eaf6ff; border-color: #bfdcf0; }
  .work-status { font-size: 13px; color: var(--muted); background: #edf5fc; padding: 13px 17px; border-radius: 10px; }
  .work-task { padding: 23px; border-radius: 14px; background: white; border-color: var(--line); }
  .work-task h3 { margin-top: 12px; font-size: 19px; }
  .work-task.done { opacity: 1; background: #f4f8fb; }
  .task-actions { gap: 8px; }

  /* Admission progress and state-specific next actions. */
  .process-strip { display: flex; list-style: none; padding: 17px 22px; margin: 0 0 22px; gap: 12px; justify-content: space-between; background: #edf5fc; border-radius: 12px; }
  .process-strip li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #536f83; }
  .process-strip li>span { display: inline-grid; place-items: center; border: 1px solid #aac9dd; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; flex-shrink: 0; }
  .process-strip li[aria-current=step] { color: #145b86; font-weight: 700; }
  .process-strip li[aria-current=step]>span,.process-strip .is-complete>span { background: var(--teal); color: white; border-color: var(--teal); }
  .intake-test { background: transparent; color: var(--muted); border: 0; border-left: 3px solid #a9cfe8; padding: 5px 12px; margin: 18px 0; font-size: 12px; }
  .intake-metrics { gap: 12px; }
  .stat { background: white; border: 1px solid var(--line); border-radius: 13px; padding: 20px; text-align: left; }
  .stat>span { display: block; font-size: 12px; color: var(--muted); }
  .stat>strong { font-size: 30px; font-weight: 700; line-height: 1.6; color: #204f70; font-variant-numeric: tabular-nums; }
  .stat>small { font-size: 12px; }
  .capacity-overview { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; margin: 18px 0; }
  .capacity-list { gap: 8px; padding: 4px 0; }
  .intake-search { max-width: none; margin: 18px 0; }
  .intake-search input { max-width: 480px; }
  .list-caption { font-size: 12px; color: var(--muted); margin: 16px 0 9px; }
  .intake-row { padding: 19px 21px; border-radius: 12px; border-color: var(--line); gap: 18px; margin-bottom: 9px; background: white; }
  .intake-row>div:first-child { flex: 1; min-width: 0; }
  .intake-row strong { font-size: 16px; }
  .intake-row small { font-size: 11px; line-height: 1.8; margin-top: 3px; }
  .intake-row button { font-size: 12px; }
  .state-badge { display: inline-block; border-radius: 6px; padding: 4px 9px; font-size: 12px; font-weight: 600; background: #edf3f8; color: #41627a; white-space: nowrap; }
  .state-pending,.state-hold { background: #fff0dc; color: #835514; }
  .state-reserved { background: #e9eff8; color: #3f5e8d; }
  .state-confirmed { background: #e6f2e9; color: #256640; }
  .state-ended,.state-cancelled { background: #eef2f5; color: #5c7180; }
  .state-waiting { background: #f0eaf5; color: #6c507d; }
  .identity { background: #eff6fc; padding: 22px; border-radius: 12px; margin: 0 0 22px; }
  .identity>strong { font-size: 25px; }
  .identity p { margin: 5px 0 10px; }
  .identity small { font-size: 12px; }
  .dialog-section { margin: 26px 0; }
  .dialog-section h3 { margin: 0 0 12px; font-size: 15px; }
  .dialog-next { padding: 21px; background: #e8f5ff; border: 1px solid #bfdcf0; border-radius: 12px; margin: 20px 0; }
  .dialog-next h3 { margin: 0 0 8px; font-size: 16px; }
  .dialog-next p { color: #3f617a; font-size: 13px; margin: 7px 0 15px; }
  .dialog-next button { width: 100%; }
  .dialog-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0; }
  .dialog-links button { text-align: left; font-size: 13px; font-weight: 500; }
  .dialog-links a { grid-column: 1/-1; font-size: 13px; padding: 9px 0; }
  .fee-grid { gap: 12px; }
  .fee-grid .panel { padding: 17px; background: #f7fafc; border-radius: 10px; }
  .fee-grid strong { font-size: 20px; }
  .fee-grid small { font-size: 12px; }
  .fee-grid button { font-size: 12px; margin-top: 12px; }
  .notice-preview { font-size: 13px; background: #f5f9fc; border-color: var(--line); padding: 20px; }

  /* Fast reception remains category-first with large targets. */
  .reception-start { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 25px 28px; border: 1px solid #bfdcf0; border-radius: var(--radius); background: #eaf6ff; }
  .reception-start h2 { margin: 0; font-size: 23px; }
  .reception-start p:last-child { font-size: 13px; color: #3a5f79; margin: 7px 0 0; }
  #scan-qr { font-size: 16px; min-height: 57px; padding: 14px 25px; flex-shrink: 0; }
  .tool-drawer { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; margin: 16px 0; }
  .tool-drawer .flow-actions { display: flex; flex-wrap: wrap; }
  .sync-bar { margin: 18px 0; gap: 14px; }
  #sync { font-size: 12px; }
  #refresh { font-size: 12px; min-height: 40px; }
  .stats { gap: 12px; }
  .desk-summary { padding: 13px 17px; background: #eaf3fb; font-size: 13px; }
  .desk-tools { display: flex; gap: 9px; align-items: flex-start; flex-wrap: wrap; margin: 14px 0 28px; }
  .desk-tools button { font-size: 12px; min-height: 42px; }
  .desk-tools details { padding: 0; border: 0; margin: 0; }
  .desk-tools summary { padding: 10px 12px; font-size: 12px; min-height: 42px; }
  .desk-tools details[open] { flex-basis: 100%; }
  .section-title h2 { font-size: 19px; }
  .categories { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 10px; margin: 18px 0 24px; }
  .categories button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; width: 100%; min-width: 0; min-height: 80px; padding: 15px; text-align: left; border-radius: 12px; font-size: 14px; }
  .categories button[aria-pressed=true] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
  .categories button[aria-pressed=true] small { color: var(--brand-ink); opacity: 1; }
  .categories small { font-size: 11px; margin-top: 5px; }
  .filters { background: #edf5fc; border-radius: 13px; padding: 19px; gap: 18px; margin: 20px 0; }
  .filters>label:first-child { flex: 1; }
  #result-count { font-size: 12px; }
  .person { border-color: var(--line); border-radius: 12px; gap: 20px; padding: 19px 22px; margin-bottom: 9px; }
  .person-name { min-width: 0; }
  .person-name strong { font-size: 19px; }
  .person-name small { font-size: 12px; }
  .arrival { font-size: 13px; min-width: 72px; }
  .arrival.arrived { color: #267347; }
  .arrival.review { color: #9a5d15; }
  .person .actions button { font-size: 12px; min-height: 44px; }
  .person .actions button.primary { min-width: 100px; font-size: 14px; }

  /* Choir: consistent controls, its own regional/season identity. */
  .choir-hero { border: 0; background: #eaf6f1; padding: 28px; border-radius: var(--radius); }
  .choir-hero h2 { font-size: 27px; }
  .choir-hero p:first-child { color: #006650; font-size: 12px; letter-spacing: .05em; }
  .theme-autumn { background: #f5ede0; border-color: #e3d5be; }
  .theme-spring { background: #f3eaf0; border-color: #dfd0da; }
  .theme-summer { background: #e6f5fd; border-color: #c5e1f2; }
  .theme-winter { background: #eaf0f7; border-color: #ccdae6; }
  .choir-season { border-radius: 16px; padding: 26px; text-align: left; min-height: 245px; }
  .choir-season strong { font-size: 23px; }
  .choir-meeting { background: white; border-color: var(--line); border-radius: 14px; padding: 23px; }
  .choir-meeting h3 { font-size: 20px; }
  .choir-homework { border-left-color: var(--brand); background: #edf6fd; border-radius: 9px; padding: 16px; color: #335b77; }
  .choir-tabs { border-bottom: 1px solid var(--line); gap: 6px; padding-bottom: 12px; margin: 24px 0; }
  .choir-tabs button { border-radius: 9px; }
  .choir-tabs button[aria-current=page],.choir-tabs button[aria-pressed=true] { background: var(--teal); color: white; border-color: var(--teal); }
  .choir-player { background: #fffffff5; border: 1px solid var(--line); backdrop-filter: blur(12px); box-shadow: 0 -5px 30px #244e7012; border-radius: 16px; }
  .choir-reception-date,.choir-file { background: #eaf6ff; }
  .choir-public .choir-portal { padding: 32px 24px; }

  /* Participant pages: one clear status, next action, then the details. */
  .ticket-main,.apply-main { max-width: 760px; padding: 38px 24px 50px; }
  .ticket-main h1,.apply-main h1 { font-size: 29px; }
  .ticket-main>p.muted { font-size: 14px; }
  .ticket-card { border-color: var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 30px; }
  .ticket-card h2 { font-size: 20px; }
  .ticket-person { margin-top: 18px; }
  .ticket-person strong { font-size: 22px; }
  .ticket-arrival { background: #edf5fb; padding: 15px; border-radius: 12px; margin: 16px 0; }
  .ticket-arrival.complete { background: #e6f3e7; border-color: #b3d1b8; }
  .ticket-arrival strong { font-size: 24px; }
  .participant-shortcuts { display: flex; gap: 9px; margin: 22px 0; }
  .participant-shortcuts button { flex: 1; font-size: 13px; min-height: 48px; }
  .participant-shortcuts button:first-child { border-color: #77afd4; color: var(--teal); }
  .guide-section { margin: 22px 0; border-color: var(--line); border-radius: 14px; }
  .part-section { scroll-margin-top: 20px; }
  .part-poll.panel { box-shadow: none; }
  .part-help { background: #edf6fd; border-radius: 10px; color: #3b5e78; }
  .part-option.chosen { border-color: var(--teal); background: #eaf6ff; }
  .part-mine { background: #ddf0fe; }
  .part-options { gap: 12px; }
  .part-option>button { min-height: 78px; }
  .part-option>button:hover { background: transparent; }
  .application-stage { text-align: left; margin: 22px 0; padding: 24px; background: #eaf3e6; border-radius: 13px; }
  .application-stage>strong { font-size: 24px; }
  .application-stage p { margin-bottom: 0; font-size: 14px; }
  .application-stage[data-state=pending],.application-stage[data-state=hold] { background: #fcf0dc; }
  .application-stage[data-state=waiting] { background: #f0eaf5; }
  .application-stage[data-state=cancelled],.application-stage[data-state=ended] { background: #edf2f6; }
  .application-stage[data-state=reserved] { background: #eaf0f7; }
  .application-next { margin: 20px 0; padding: 22px; background: #eef7fd; border: 1px solid var(--line); border-radius: 13px; }
  .application-next button,.application-next .button-link { width: 100%; margin-top: 8px; }
  .apply-fees { font-size: 13px; margin-top: 20px; }
  .apply-fees th { background: #f0f6fb; font-size: 12px; }
  .apply-fees th,.apply-fees td { padding: 14px 10px; border-bottom: 1px solid var(--line); }
  .apply-main #apply-status { font-size: 13px; color: var(--muted); }
  .apply-main .process-strip { padding: 16px; }
  .privacy-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

  /* Dialogs, feedback and login. */
  dialog { width: min(640px,calc(100% - 36px)); max-height: 90dvh; padding: 0 28px 26px; border: 1px solid #c8d9e5; border-radius: 18px; box-shadow: 0 24px 100px #173c5938; color: var(--ink); }
  dialog::backdrop { background: #153c5766; backdrop-filter: blur(3px); }
  .dialog-head { position: sticky; top: 0; z-index: 5; padding: 20px 0; margin: 0 0 22px; background: white; border-bottom: 1px solid var(--line); align-items: center; gap: 15px; }
  .dialog-head h2 { font-size: 19px; margin: 0; }
  #dialog-title:focus { outline: none; }
  #dialog-close { min-height: 40px; font-size: 12px; flex-shrink: 0; }
  #dialog-error:empty { display: none; }
  #dialog-error:not(:empty),#login-error:not(:empty) { background: #fff1ed; border-left: 3px solid #b74d3b; padding: 13px 16px; color: #913b2b; border-radius: 6px; font-size: 14px; }
  .notice { background: #174c70; border: 1px solid #39779f; color: white; box-shadow: 0 8px 30px #244d6e26; padding: 16px 24px; font-size: 14px; border-radius: 12px; max-width: calc(100% - 32px); z-index: 20; }
  .login.panel { max-width: 470px; margin: 65px auto; padding: 40px; box-shadow: var(--shadow); }
  .login h1 { font-size: 27px; }
  .login form { margin-top: 30px; }
  .login .primary { min-height: 50px; }
  .login details,.login .hosted-only { font-size: 12px; }
  #boot-message { padding: 40px; text-align: center; color: var(--muted); }

  @media (min-width:1101px) { .business-switcher { display: none; } }
  @media (max-width:1200px) {
    #workspace { grid-template-columns: 195px minmax(0,1fr); }
    .workspace-content { padding: 24px; }
    .hub-navigation { padding: 28px 12px; }
    .event-nav .ui-icon { display: none; }
    .header-caption { display: none; }
    #account { margin-left: auto; }
    .event-card { padding: 18px; }
    .intake-row { gap: 12px; }
    .person { flex-wrap: wrap; }
    .person .person-name { flex: 1 1 180px; }
    .person .actions { margin-left: auto; }
  }
  @media (max-width:1100px) {
    #workspace { display: block; }
    .hub-navigation { flex-direction: row; align-items: center; padding: 12px 24px; gap: 15px; border-right: 0; border-bottom: 1px solid var(--line); }
    .hub-navigation .nav-caption,.business-links,.nav-footnote { display: none; }
    .hub-navigation .business-switcher { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; font-size: 0; flex: 1; order: 0; width: auto; min-width: 0; }
    .business-switcher select { font-size: 13px; background: white; max-width: 300px; }
    .hub-navigation a { padding: 10px 12px; white-space: nowrap; font-size: 13px; }
    #common-settings { margin: 0 0 0 auto; border: 0; }
    .hub-navigation .ui-icon { width: 18px; height: 18px; }
    .workspace-content { padding: 22px 28px 30px; }
  }
  @media (max-width:750px) {
    body { font-size: 14px; }
    body>header,.workspace-app .app-header { padding: 15px 20px; gap: 12px; }
    .brand-logo { width:144px; }
    #account { flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
    #account>span { font-size: 11px; }
    #account button { padding: 7px 9px; min-height: 40px; font-size: 11px; }
    .hub-navigation { padding: 10px 16px; gap: 9px; }
    .hub-navigation a { font-size: 12px; padding: 9px; }
    .hub-navigation .ui-icon { display: none; }
    .workspace-content { padding: 22px 20px; }
    .workspace-head { margin-bottom: 22px; flex-direction: column; }
    .workspace-head h1 { font-size: 26px; }
    .scope-trail { margin-bottom: 20px; font-size: 11px; }
    .home-welcome { flex-direction: column; gap: 12px; }
    .home-date { font-size: 11px; }
    .business-grid,.hub-bottom,.activity-grid,.settings-grid { grid-template-columns: 1fr; }
    .business-card { min-height: 238px; padding: 24px; }
    .business-card h2 { font-size: 23px; margin-top: 17px; }
    .business-card>p { margin-bottom: 18px; }
    .hub-add { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
    .panel { padding: 22px; }
    .event-nav { margin-bottom: 24px; }
    .event-nav button { min-width: auto; font-size: 12px; padding: 12px 14px; }
    .event-hero { padding: 25px; }
    .event-hero h2 { font-size: 21px; }
    .event-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .event-card { min-height: 184px; padding: 19px; }
    .event-card strong { font-size: 17px; }
    .next-action { align-items: flex-start; flex-direction: column; padding: 22px; gap: 18px; }
    .next-action button { width: 100%; }
    .event-form fieldset { padding: 20px; }
    .event-toolbar h2 { flex-basis: 100%; margin-bottom: 8px; }
    .save-bar { padding: 14px; gap: 8px; }
    #edit-state { flex-basis: 100%; }
    .save-bar button { flex: 1; font-size: 12px; }
    .process-strip { gap: 6px; padding: 15px; }
    .process-strip li { flex-direction: column; text-align: center; gap: 5px; font-size: 11px; flex: 1; }
    .intake-metrics,.stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .stat { padding: 17px; }
    .stat>strong { font-size: 28px; }
    .intake-row { display: grid; grid-template-columns: 1fr auto; padding: 18px; gap: 12px; align-items: start; }
    .intake-row .state-badge { font-size: 10px; }
    .intake-row strong { font-size: 15px; }
    .intake-row button { align-self: end; }
    .reception-start { padding: 23px; flex-direction: column; align-items: stretch; gap: 18px; }
    #scan-qr { width: 100%; }
    .categories { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
    .categories button { font-size: 12px; padding: 12px 9px; min-height: 79px; }
    .categories small { font-size: 10px; white-space: normal; }
    .filters { padding: 16px; }
    .person { padding: 18px; gap: 12px; }
    .person .person-name { flex: 1 1 50%; }
    .person .actions { flex: 1 1 auto; justify-content: flex-end; }
    .person-name strong { font-size: 18px; }
    .choir-hero { padding: 25px; }
    .choir-hero h2 { font-size: 24px; }
    dialog { padding: 0 20px 22px; width: calc(100% - 24px); border-radius: 16px; }
    .dialog-head { padding: 17px 0; }
    .dialog-head h2 { font-size: 18px; }
    .dialog-links { grid-template-columns: 1fr; }
    .login.panel { margin: 40px 20px; padding: 30px; }
    .ticket-main,.apply-main { padding: 30px 20px 40px; }
    .ticket-main h1,.apply-main h1 { font-size: 26px; }
    .ticket-main>.eyebrow { display: none; }
    .ticket-main { padding-top: 24px; }
    .ticket-label { margin-bottom: 10px; }
    .ticket-card .ticket-person { margin-top: 13px; }
    .ticket-card h2 { font-size: 18px; }
    .ticket-card .ticket-arrival strong { font-size: 20px; }
    .ticket-card .ticket-arrival p { font-size: 12px; }
    .ticket-qr { width: 250px; margin: 14px auto; }
    .ticket-card { padding: 24px; }
    .ticket-main .participant-shortcuts { gap: 7px; }
    .participant-shortcuts button { padding: 10px 8px; font-size: 12px; }
    .application-stage { padding: 20px; }
    .application-stage>strong { font-size: 22px; }
  }
  @media (max-width:400px) {
    .workspace-app .app-header { align-items: flex-start; }
    #account { max-width: 185px; }
    #account>span { flex-basis: 100%; text-align: right; }
    .hub-navigation { gap: 4px; padding: 9px 12px; }
    .hub-navigation a { padding: 8px 6px; font-size: 11px; }
    .business-switcher select { font-size: 12px; padding: 8px; }
    .workspace-content { padding: 20px 16px; }
    .event-card { padding: 17px; }
    .event-card small { font-size: 11px; }
    .categories { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .apply-main .panel { padding: 18px; }
    .apply-fees th,.apply-fees td { padding: 12px 7px; font-size: 11px; }
  }
  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; } }
}

@media screen {
  .guide-timeline { list-style:none; padding:2px 0 0; margin:22px 0 0; }
  .guide-timeline li { position:relative; display:grid; grid-template-columns:58px minmax(0,1fr); gap:25px; padding:0 0 28px; font-size:14px; line-height:1.8; }
  .guide-timeline li:last-child { padding-bottom:0; }
  .guide-timeline li:before { content:''; position:absolute; left:68px; top:8px; width:7px; height:7px; border:2px solid #598da9; border-radius:50%; background:#fff; }
  .guide-timeline li:not(:last-child):after { content:''; position:absolute; left:72px; top:19px; bottom:-8px; width:1px; background:#b9d2e1; }
  .guide-timeline time { font-variant-numeric:tabular-nums; font-weight:700; color:#234d64; }
  .guide-timeline time small { display:block; font-size:10px; font-weight:400; color:#526f81; }
  .guide-timeline .timeline-note { grid-column:2; }
  .guide-program ol { padding-left:23px; margin:18px 0 0; }
  .guide-program li { padding:9px 0 9px 7px; font-weight:600; }
  .guide-program li::marker { color:#54798d; font-weight:400; }
  .guide-belongings>p { padding:16px; border-radius:10px; background:#f1f7fb; }
}

/* Production never presents the fictional-data banner or simulation controls. */
html[data-production="true"] .trial,html[data-production="true"] [data-test-only],html[data-production="true"] .local-only{display:none!important}
html[data-production="true"] .hosted-only{display:block!important}
.live-mail-history{display:grid;gap:12px;margin:20px 0}.live-mail-history small{overflow-wrap:anywhere}
#live-batch-people{max-height:45vh;overflow:auto;padding:12px}#live-batch-people small{display:block}