/* Shared interface patterns: information popover, help button, detail drawer.
   Colours come from the tokens of app.css (which carries the dark theme), so
   the same rules serve the staff application and the City website, light and
   dark.  Layout contract:
     - the drawer sits at the right edge;
     - it keeps --ui-clear-top free at the top (toasts live top-right) and
       --ui-clear-bottom free at the bottom (the mobile navigation lives
       there), so it never covers either. */

:root {
  --ui-clear-top: 112px; /* clears a shown toast: top 64px + its height */
  --ui-clear-bottom: 68px;
  --ui-drawer-w: 460px;
}

/* ------------------------------------------------------------ P1 popover */
.ui-info { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ui-info-btn, .ui-info-fallback > summary, .ui-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--accent, #1f5f8b); background: var(--surface, #fff);
  color: var(--accent, #1f5f8b); font: 700 12px/1 var(--f-body, system-ui, sans-serif);
  cursor: pointer; text-decoration: none; list-style: none;
}
.ui-info-fallback > summary::-webkit-details-marker { display: none; }
.ui-info-btn:hover, .ui-info-fallback > summary:hover, .ui-help:hover { background: var(--accent-soft, #e3eef6); }
.ui-info-btn:focus-visible, .ui-info-fallback > summary:focus-visible, .ui-help:focus-visible,
.ui-detail-link:focus-visible, .ui-drawer-close:focus-visible {
  outline: 3px solid var(--accent, #1f5f8b); outline-offset: 2px;
}
.ui-info-btn { display: none; }
html.ui-js .ui-info-btn { display: inline-flex; }
html.ui-js .ui-info-fallback { display: none; }
.ui-info-fallback { display: inline-block; }
.ui-info-fallback[open] > .ui-info-text,
.ui-info-pop {
  display: block; position: absolute; z-index: var(--z-popover); top: calc(100% + 6px); left: 0;
  width: max-content; max-width: min(300px, calc(100vw - 32px));
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line, #dde3e9);
  background: var(--surface, #fff); color: var(--fg, #142230);
  box-shadow: var(--shadow, 0 4px 14px rgba(0,0,0,.2)); font-size: .82rem; line-height: 1.45; text-align: left;
}
.ui-info-pop[hidden] { display: none; }
.ui-info-pop.ui-flip { left: auto; right: 0; }

/* -------------------------------------------------------------- P2 help */
.ui-help { width: 28px; height: 28px; font-size: 15px; vertical-align: middle; }

/* ------------------------------------------------------- P3 detail link */
.ui-detail-link { color: var(--accent, #1f5f8b); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* -------------------------------------------------------------- P3 drawer */
.ui-drawer {
  position: fixed; z-index: var(--z-drawer); right: 0;
  box-sizing: border-box; width: var(--ui-drawer-w); max-width: calc(100% - 16px);
  top: var(--ui-clear-top); bottom: var(--ui-clear-bottom);
  background: var(--surface, #fff); color: var(--fg, #142230);
  border: 1px solid var(--line, #dde3e9); border-right: 0; border-radius: 12px 0 0 12px;
  box-shadow: -8px 0 28px rgba(0,0,0,.18); display: flex; flex-direction: column;
}
.ui-drawer[hidden] { display: none; }
.ui-drawer-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ui-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line, #dde3e9);
}
.ui-drawer-head h2 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.ui-drawer-head h2:focus { outline: none; }
.ui-drawer-sub { margin: 4px 0 0; font-size: .82rem; color: var(--fg-2, #4a5b6b); }
.ui-drawer-close {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--line, #dde3e9); background: var(--surface-2, #eef2f5);
  color: var(--fg, #142230); font-size: 22px; line-height: 1; text-decoration: none; cursor: pointer;
}
.ui-drawer-close:hover { background: var(--accent-soft, #e3eef6); }
.ui-drawer-body { padding: 14px 18px 20px; overflow-y: auto; min-height: 0; flex: 1; }
.ui-drawer-section + .ui-drawer-section { margin-top: 18px; }
.ui-drawer-section h3 { margin: 0 0 8px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2, #4a5b6b); }
.ui-drawer-section p { margin: 0 0 8px; font-size: .92rem; line-height: 1.5; }
.ui-drawer-section dl { margin: 0; }
.ui-drawer-section dl > div { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft, #e9edf1); font-size: .86rem; }
.ui-drawer-section dt { color: var(--fg-2, #4a5b6b); }
.ui-drawer-section dd { margin: 0; overflow-wrap: anywhere; }
.ui-drawer-section dd.mono { font-family: var(--f-mono, ui-monospace, monospace); font-size: .8rem; }
.ui-drawer-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line, #dde3e9); }
.ui-drawer-tabs a { padding: 8px 10px; font-size: .84rem; font-weight: 600; color: var(--fg-2, #4a5b6b); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ui-drawer-tabs a[aria-current="page"] { color: var(--fg, #142230); border-bottom-color: var(--accent, #1f5f8b); }
.ui-drawer-tabs a:focus-visible { outline: 2px solid var(--accent, #1f5f8b); outline-offset: 2px; }
.ui-drawer-section table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ui-drawer-section th, .ui-drawer-section td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line-soft, #e9edf1); vertical-align: top; overflow-wrap: anywhere; }
.ui-drawer-links { margin: 16px 0 0; padding-left: 18px; font-size: .9rem; }
.ui-drawer-refused { margin: 0; padding: 12px; border-radius: 8px; background: var(--bad-soft, #fbe6e3); color: var(--fg, #142230); }

@media (max-width: 760px) {
  /* The staff app's bottom bar sits lower here. */
  :root { --ui-clear-bottom: 120px; }
}

/* Narrow screens: a full-width sheet.  The top and bottom bands stay free for
   the toasts and for the mobile navigation. */
@media (max-width: 640px) {
  .ui-drawer { width: 100%; max-width: 100%; left: 0; border-radius: 12px 12px 0 0; border: 1px solid var(--line, #dde3e9); border-left: 0; }
  .ui-drawer-section dl > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ui-drawer.is-open { animation: ui-drawer-in .18s ease-out; }
  @keyframes ui-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media print { .ui-drawer, .ui-help, .ui-info { display: none !important; } }

/* ------------------------------------------------- P4 the last action panel */
/* The bell in the header of the staff frame and the panel it opens.  The panel
   stands at the right edge like the drawer and keeps the same bands free: the
   toast above it and the mobile navigation below it.  It sits above the other
   overlays (--z-feedback-panel) and below the guided tour and the persona
   menu, which stay on top of everything. */

.last-action-toggle {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line, #dde3e9); border-radius: 10px;
  background: var(--surface, #fff); color: var(--fg-2, #4a5b6b); cursor: pointer;
}
.last-action-toggle:hover { background: var(--surface-2, #eef2f5); color: var(--fg, #142230); }
.last-action-toggle:focus-visible { outline: 3px solid var(--accent, #1f5f8b); outline-offset: 2px; }
.last-action-toggle[aria-expanded="true"] { background: var(--accent-soft, #e3eef6); color: var(--accent, #1f5f8b); }
.last-action-icon { width: 18px; height: 18px; }
/* The dot marks a result the person has not opened yet. */
.last-action-dot {
  position: absolute; top: 4px; right: 4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent, #1f5f8b); border: 2px solid var(--surface, #fff);
}
.last-action-dot[hidden] { display: none; }
.last-action-toggle[data-outcome="denied"] .last-action-dot { background: var(--denied, #f0786d); }

.feedback-panel {
  position: fixed; z-index: var(--z-feedback-panel); right: 0; left: auto;
  top: var(--ui-clear-top); bottom: var(--ui-clear-bottom);
  width: min(24rem, 100%); max-width: 100%;
  display: flex; flex-direction: column;
  background: var(--surface, #fff); color: var(--fg, #142230);
  border: 1px solid var(--line, #dde3e9); border-right: 0; border-radius: 12px 0 0 12px;
  box-shadow: -8px 0 28px rgba(0,0,0,.18);
}
.feedback-panel[hidden] { display: none; }
.feedback-panel.feedback-accepted { border-left: 5px solid var(--accepted, #4cc488); }
.feedback-panel.feedback-denied { border-left: 5px solid var(--denied, #f0786d); }
.feedback-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--line, #dde3e9);
}
.feedback-panel-title { font-size: 1rem; margin: 0; }
.feedback-panel-title:focus { outline: none; }
.feedback-panel-close {
  flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--line, #dde3e9); background: var(--surface-2, #eef2f5);
  color: var(--fg, #142230); font-size: 20px; line-height: 1; cursor: pointer;
}
.feedback-panel-close:hover { background: var(--accent-soft, #e3eef6); }
.feedback-panel-close:focus-visible { outline: 3px solid var(--accent, #1f5f8b); outline-offset: 2px; }
.feedback-panel-body { padding: 12px 14px 18px; overflow-y: auto; min-height: 0; flex: 1; }
/* The panel is narrow, so the detail list stands in one column. */
.feedback-panel .feedback-detail { grid-template-columns: minmax(0, 1fr); }
.feedback-panel-empty { margin: 0; font-size: .88rem; color: var(--fg-2, #4a5b6b); }

/* The toast of the last action.  It is only the picture of the result: the
   hidden region of the frame speaks it for a screen reader.  A refusal stays
   on the screen until it is dismissed, so only its button takes the clicks. */
.toast-text { max-width: 44ch; }
.toast-sticky { pointer-events: none; }
.toast-sticky .toast-dismiss { pointer-events: auto; }
.toast-dismiss {
  flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid currentColor; background: transparent;
  color: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: .75;
}
.toast-dismiss:hover { opacity: 1; }
.toast-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Narrow screens: a full-width sheet above the mobile navigation. */
@media (max-width: 640px) {
  .feedback-panel {
    /* The sheet fills the screen without the scrollbar of the page. */
    width: auto; max-width: none; left: 0; right: 0; top: auto;
    bottom: var(--ui-clear-bottom); max-height: 72vh;
    border-radius: 14px 14px 0 0; border-bottom: 0;
  }
}
@media print { .feedback-panel { display: none !important; } }

/* Help and documentation (/help).  Colours come from the shared tokens, so the
   pages follow the light and dark themes of both frames. */
.top-help-link { flex: none; font-size: .9rem; font-weight: 600; color: var(--accent); text-decoration: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
.top-help-link:hover, .top-help-link[aria-current="page"] { background: var(--accent-soft); }
.top-help-link:focus-visible, .city-help-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.city-header-tools { display: flex; align-items: center; gap: 14px; }
.city-help-link { color: #fff; font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 760px) { .city-help-more { display: none; } .city-wordmark b { white-space: nowrap; } .city-header-tools { flex-shrink: 0; } }
.help-page { max-width: 62rem; padding-bottom: 2rem; }
.help-cards { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 14px; }
.help-card { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.help-card h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.help-card p { margin: .3rem 0; }
.help-section, .help-notes { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 18px; margin: 1rem 0; }
.help-steps { padding-left: 1.4rem; }
.help-steps > li { margin: 0 0 1rem; padding-left: .3rem; }
.help-steps p { margin: .25rem 0; }
.help-who, .help-result { background: var(--accent-soft); color: var(--fg); border-radius: var(--r-sm); padding: 8px 12px; }
.help-glossary dt { font-weight: 700; margin-top: .9rem; }
.help-glossary dd { margin: .2rem 0 0; }
.help-frame { width: 100%; height: 75vh; min-height: 24rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.help-doc { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 20px 16px; overflow-wrap: anywhere; }
.help-doc pre { overflow-x: auto; background: var(--surface-2); padding: 10px 12px; border-radius: var(--r-sm); }
.help-doc code { font-family: var(--f-mono); font-size: .9em; }
.help-doc .help-table { overflow-x: auto; }
.help-doc table { border-collapse: collapse; margin: .8rem 0; }
.help-doc th, .help-doc td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top; }
.help-doc blockquote { margin: .8rem 0; padding: .1rem 1rem; border-left: 4px solid var(--line); color: var(--fg-2); }
@media (max-width: 640px) { .city-header-tools { gap: 8px; } .top-help-link { padding: 3px 8px; } }

/* ---------------------------------------------------- the breadcrumb trail */
/* The breadcrumb of a page, in both frames.  It is one row of crumbs: the
   crumbs do not wrap, the last crumb truncates with an ellipsis instead of
   wrapping to a second row, and the trail never pushes the page wider.  At
   the width of a phone it truncates too.  The separator is the one of the
   frame: the City website writes "›", the staff application "/". */
.crumb-trail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4px; min-width: 0; overflow: hidden; }
.crumb-trail li { white-space: nowrap; }
.crumb-trail li:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumb-trail li + li::before { content: var(--crumb-sep, "\203A"); margin-right: 6px; color: var(--fg-3); }