/* OneQode Vault — responsive layer.
   Loaded AFTER the active theme (classic|brand); both themes share class names,
   so this single file adapts either one to small screens. Desktop is untouched.
   Breakpoints: 760px = phones + small portrait tablets; 460px = narrow phones; admin tables fold at 900/560px. */

/* Never let the page itself scroll sideways — wide content scrolls in its own box. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Offscreen but readable by assistive tech (theme announcements). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Auto/Light/Dark cycle button in the topbar (all themes). */
.theme-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-size: 1.02rem; line-height: 1; }
.theme-btn__label { font-size: .78rem; letter-spacing: .01em; }
/* The topbar is already tight on phones; the glyph alone carries it there, and the
   aria-label still names both states. */
@media (max-width: 760px) { .theme-btn__label { display: none; } }

/* Progressive-disclosure panels (e.g. the new-folder input). */
.hidden { display: none !important; }

/* ---- Tables (all themes) ----
   A `.card` wrapped around a bare table clips and scrolls its own overflow: a row too
   wide for the card (long actor emails in the audit log) used to spill out past the
   card border instead of scrolling inside it. */
.card:has(> table) { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.breakword { overflow-wrap: anywhere; }
/* `anywhere` also shrinks a cell's min-content width, which lets a narrow viewport
   squeeze the column down to one character per line - keep a readable floor. */
td.breakword { min-width: 13ch; }
.badge { white-space: nowrap; }
/* Bulk selection: the themes stretch a bare input to the full cell, which a checkbox
   must opt out of, and the bar rides above the table as a header strip. */
.col-sel { width: 1%; padding-right: 0; }
.col-sel input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.bulkbar { border-bottom: 1px solid var(--line); background: var(--bg-2); }
/* The themes stretch a form control to its container; here the bar is the container. */
.bulkbar select { width: auto; max-width: 40%; }
/* Row action buttons hug the right edge, so their header has to follow them over. */
.col-actions { text-align: right; }
.col-actions .pill-row { justify-content: flex-end; align-items: center; }
/* Move up / move down on a manage-view row: a tight pair of icon buttons ahead of the
   row's own actions. The end of the list renders disabled rather than disappearing, so
   the column does not jump from row to row. */
.reorder { display: inline-flex; gap: 2px; }
.reorder form { margin: 0; }
.btn.sm.step { padding: 4px 6px; line-height: 0; }
.btn.sm.step svg { display: block; }
.btn.sm.step:disabled { opacity: .3; cursor: default; }
/* A pressed auth button in flight: the knot spinner stands in for the button's
   leading mark (oq-spin/oq-trace come from the vendored motion.css). */
.btn > .btn-mark, .btn > .btn-spin { display: inline-flex; flex: none; }
.btn > .btn-spin, .btn[aria-busy="true"] > .btn-mark { display: none; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .72; }
.btn[aria-busy="true"] > .btn-spin { display: inline-flex; }
.btn-spin svg { width: 16px; height: 16px; overflow: visible; animation: oq-spin 2s linear infinite; }
.btn-spin svg path {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: oq-trace 1.7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .btn-spin svg { animation: none; } }

/* A destructive row action repeated down every row: danger in the text, not a red slab. */
.btn.ghost.danger { background: transparent; color: var(--danger); border-color: var(--line-2); }
.btn.ghost.danger:hover { background: var(--bg-3); border-color: var(--danger); }
/* A table card that carries its own header strip: the strip is padded, the table stays
   flush to the card edges the way a bare `.card > table` does. */
.card.table-card { padding: 0; }
.table-head { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 15px 18px 12px; }
.table-head h3 { margin: 0; }
.table-head .spacer { flex: 1; }
.table-head .count {
  display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 100px;
  border: 1px solid var(--line); font-family: var(--body); font-size: .72rem;
  font-weight: 600; color: var(--muted); vertical-align: middle;
}
.table-empty { color: var(--muted); font-size: .8rem; padding: 14px 18px; margin: 0; }

/* Cells that state the ordinary condition (active, signed, 2FA on) read as quiet meta.
   A filled badge on every row is what made the exceptions invisible. */
.cell-note { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); font-size: .8rem; }
.cell-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); flex: none; }
.cell-note.on { color: var(--ink-2); }
.cell-note.on .dot { background: var(--ink-2); }
/* The exceptions keep the badge, and only they carry colour. */
.badge.alert { color: var(--danger); border-color: var(--danger); background: transparent; }

/* Compact select for an in-cell control (row role picker). Chromeless until hovered or
   focused, so a column of them reads as values rather than as a column of widgets. */
select.sm { width: auto; min-width: 88px; padding: 4px 6px; font-size: .8rem; }
.cell-form { display: flex; gap: 5px; align-items: center; margin: 0; }
.role-select { border-color: transparent; background: transparent; color: var(--muted); }
.cell-form:hover .role-select, .role-select:focus { border-color: var(--line-2); background: var(--bg); color: var(--ink); }
.role-select.is-admin { color: var(--ink); font-weight: 600; }

/* Timestamp cells: never break mid-date, and keep digits column-aligned. */
.ts { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---- Grid / tile view (Dolphin-style file browser) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; margin-top: 14px; }
.tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius, 8px); overflow: hidden; text-decoration: none; color: var(--ink); background: var(--bg); transition: border-color .12s; }
.tile:hover { border-color: var(--line-2); text-decoration: none; }
.tile-thumb { aspect-ratio: 4 / 3; background: var(--bg-2); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.tile-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tile-thumb img.thumb { position: absolute; inset: 0; }
/* visibility, not display: a display:none lazy image never loads, so a false failure would stick */
.tile-thumb.thumb-failed img.thumb { visibility: hidden; }
.tile-thumb .ph { opacity: .5; }
.tile-thumb .ext { position: absolute; bottom: 6px; right: 6px; font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 100px; background: var(--bg-3); color: var(--muted); border: 1px solid var(--line); }
.tile-folder .tile-thumb { background: var(--bg-3); }
.tile-name { margin: 8px 10px; font-size: .8rem; line-height: 1.3; height: calc(1.3em * 2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.tile-folder .tile-name { font-weight: 600; }
.tile-actions { padding: 0 8px 8px; display: flex; gap: 6px; }
.view-toggle a { padding: 4px 9px; }
.view-toggle a.active { color: var(--ink); background: var(--bg-3); }
@media (min-width: 761px) { .menu a.phone-only { display: none; } }
@media (pointer: coarse) {
  .dropzone { padding: 16px; }
  .dropzone .dz-lead, .dropzone .dz-sub { display: none; }
  .dropzone .dz-links { margin-top: 0; font-size: 1rem; }
}

/* ---- Search field ----
   The magnifier inside the field IS the submit control, so no adjacent button is
   needed. The input keeps whatever border/radius the active theme gives it; only
   the left padding and the overlaid glyph are added here. Classic has no --blue
   or --faint, hence the fallbacks. */
.searchbox { position: relative; display: flex; align-items: center; width: 240px; margin: 0; }
/* Compact by default so the field lines up with the .btn.sm row it sits in. */
.searchbox input[type=search] { padding: 5px 11px 5px 29px; font-size: .82rem; }
.searchbox .sb-go {
  position: absolute; left: 1px; top: 1px; bottom: 1px; width: 28px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--faint, var(--muted));
}
.searchbox .sb-go svg { width: 13px; height: 13px; }
.searchbox .sb-go:hover { color: var(--ink); }
.searchbox:focus-within .sb-go { color: var(--blue, var(--ink)); }
.searchbox.lg { width: 100%; max-width: 520px; }
.searchbox.lg input[type=search] { padding: 11px 12px 11px 40px; font-size: .95rem; }
.searchbox.lg .sb-go { width: 39px; }
.searchbox.lg .sb-go svg { width: 16px; height: 16px; }

/* Safari/Chrome draw their own grey ✕; recolour it to the theme ink. */
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; cursor: pointer; opacity: .4; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type=search]::-webkit-search-cancel-button:hover { opacity: .8; }

/* ---- Confirm dialog (all themes) ----
   Replaces window.confirm; see public/js/app.js. A native <dialog> carries the focus
   trap, Escape handling and top layer, so nothing here needs a z-index to clear the
   splash overlay. Buttons reuse the theme's own .btn classes. */
.oq-confirm {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  /* --bg-2 is the lifted-surface token the .card and .menu already use: it separates the
     panel from the ground in dark, where --bg is the page colour itself. */
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.oq-confirm::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.oq-confirm__body { padding: 22px 24px 0; }
.oq-confirm__title { margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.oq-confirm__text { margin: 9px 0 0; color: var(--muted); font-size: .87rem; line-height: 1.5; }
.oq-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 20px 24px 22px; }
.oq-confirm__actions .btn[disabled] { opacity: .5; pointer-events: none; }

/* Bulk move picker: the same panel, plus a destination field. `display: none` because a
   browser without <dialog> renders the markup inline instead of hiding it. */
.oq-move:not([open]) { display: none; }
.oq-move { width: min(480px, calc(100vw - 32px)); }
.oq-move__label { display: block; margin: 16px 0 5px; font-size: .82rem; font-weight: 600; }
.oq-move select { width: 100%; max-width: none; }
.oq-move__note { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .oq-confirm[open] { animation: oq-confirm-rise .14s ease-out; }
  .oq-confirm[open]::backdrop { animation: oq-confirm-fade .14s ease-out; }
}
@keyframes oq-confirm-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes oq-confirm-fade { from { opacity: 0; } }


@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}

@media (max-width: 760px) {

  /* ---- Topbar: brand + actions on row 1, nav scrolls on row 2 ---- */
  .topbar {
    height: auto; min-height: 52px;
    padding: 8px 14px; gap: .4rem .55rem;
    flex-wrap: wrap;
  }
  .topbar .brand { margin-right: auto; }        /* push Account / Sign out to the right */
  .topbar .spacer { display: none; }
  .topbar .who { display: none; }               /* name · role — drop on small screens */
  .topbar .theme-toggle { display: none; }      /* staff colour toggle — desktop only */
  .topbar nav {
    order: 5; width: 100%;
    display: flex; gap: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-top: 2px;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; padding: 6px 9px; }

  /* ---- Page frame: tighter gutters ---- */
  .container, .main { padding: 16px 14px; }
  .main { max-width: 100%; }
  h1 { font-size: 1.34rem; }
  h2 { font-size: 1.05rem; }

  /* ---- Tables: scroll inside their card instead of blowing out the page ---- */
  .card { overflow-x: auto; }
  table { font-size: .84rem; }
  th, td { padding: 8px 9px; }

  /* ---- Forms / rows: stack full width ---- */
  .row { flex-direction: column; align-items: stretch; gap: 10px; }
  .row > * { min-width: 0; width: 100%; flex: 1 1 auto; }

  /* Toolbars (new-folder form, Access/Reports, viewer controls) stack cleanly */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar > h1 { margin-bottom: 2px; }
  .toolbar .spacer { display: none; }
  .toolbar form { flex-wrap: wrap; }
  .toolbar form > div { flex: 1 1 140px; min-width: 0; }
  .toolbar form > div[style*="max-width"] { max-width: none !important; }
  .toolbar > .btn, .toolbar form > .btn { width: 100%; justify-content: center; }
  .searchbox, .searchbox.lg { width: 100%; max-width: none; }
  .toolbar.keep-row, .toolbar.room-head { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .toolbar.keep-row > .btn, .toolbar.room-head > .btn { width: auto; }
  .toolbar.keep-row > .btn:first-child { flex: 1; }
  .room-head > h1, .room-head > .searchbox { flex: 1 1 100%; }
  .room-head > .view-toggle { margin-left: auto; }
  .toolbar > .btn.wide-only { display: none; }

  /* ---- Stat cards: two-up on phones ---- */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat .n { font-size: 1.45rem; }

  /* ---- Context menu: stay on-screen ---- */
  .menu { min-width: 180px; max-width: 82vw; }

  /* ---- Viewer: don't double-stick under the (now taller) topbar ---- */
  .viewer-toolbar { position: static !important; top: auto !important; padding: 8px 0 !important; }
  #viewer-stage iframe, #pdf-viewer { min-height: 62vh; }

  /* ---- Auth pages ---- */
  .auth-wrap { max-width: 100%; margin: 5vh auto; padding: 26px 18px; }
  .auth-wrap .card { padding: 20px 18px; }
}

@media (max-width: 460px) {
  .container, .main { padding: 14px 12px; }
  h1 { font-size: 1.22rem; }
  .stat-grid { grid-template-columns: 1fr; }
  .btn.sm { padding: 6px 10px; }               /* keep small buttons tappable */
  .topbar .brand { font-size: 1rem; }
  /* Stacked, full-width dialog buttons: confirm on top, thumb-reachable. */
  .oq-confirm__actions { flex-direction: column-reverse; }
  .oq-confirm__actions .btn { width: 100%; justify-content: center; }
}

/* ---- Design-system token bridge (for @oneqode/design-system recipes) ----
   The shared splash/loader recipe reads DS token names. Map them onto Vault's
   live theme vars so the motion tracks the classic/brand/dark toggle. Note the
   DS is dark-first: --color-dark/-surface-elevated are BACKGROUNDS and
   --color-foreground is the INK, so the mapping is bg to dark, ink to foreground. */
:root {
  --color-dark:             var(--bg);
  --color-surface-elevated: var(--bg);
  --color-foreground:       var(--ink);
  --color-muted:            var(--muted);
  --color-line:             var(--line);
  --font-display:           var(--head);
}

/* ---- Admin shell: section rail + content ---- */
.admin-shell { display: flex; align-items: flex-start; gap: 26px; }
.admin-main { flex: 1; min-width: 0; }
.admin-rail {
  flex: 0 0 168px; position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 0; border-right: 1px solid var(--line);
}
.admin-rail a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 14px 7px 12px; margin-right: -1px;
  color: var(--muted); font-size: .88rem; border-radius: var(--radius) 0 0 var(--radius);
}
.admin-rail a:hover { color: var(--ink); background: var(--bg-3); text-decoration: none; }
.admin-rail a.on {
  color: var(--ink); font-weight: 600; background: var(--bg-2);
  box-shadow: inset 2px 0 0 var(--blue, var(--accent));
}
.admin-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.admin-tabs a {
  padding: 8px 12px; color: var(--muted); font-size: .88rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tabs a:hover { color: var(--ink); text-decoration: none; }
.admin-tabs a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--blue, var(--accent)); }
.badge.attn { background: var(--danger); color: #fff; border-color: transparent; }
.role-note {
  margin: 0 0 14px; padding: 7px 11px; font-size: .82rem; color: var(--ink-2);
  background: var(--bg-2); border-left: 2px solid var(--line-2); border-radius: 0 var(--radius) var(--radius) 0;
}

@media (max-width: 760px) {
  .admin-shell { display: block; }
  .admin-rail {
    position: static; flex-direction: row; gap: 2px;
    border-right: 0; border-bottom: 1px solid var(--line);
    margin-bottom: 14px; padding: 0 0 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .admin-rail::-webkit-scrollbar { display: none; }
  .admin-rail a { white-space: nowrap; border-radius: var(--radius); margin-right: 0; }
  .admin-rail a.rail-home { display: none; }
}

a.stat { color: inherit; text-decoration: none; display: block; }
a.stat:hover { border-color: var(--line-2); text-decoration: none; }

.facets { display: flex; flex-wrap: wrap; gap: 5px; }
.facets .facet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; font-size: .8rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
}
.facets .facet:hover { color: var(--ink); border-color: var(--line-2); text-decoration: none; }
.facets .facet.on { color: var(--ink); font-weight: 600; border-color: var(--blue, var(--accent)); }
.pager { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.pager .spacer { flex: 1; }
.filter-chips { align-items: center; padding: 0 18px 12px; }
.cell-filter { color: inherit; }
.cell-filter:hover { color: var(--blue, var(--accent)); }
tr.failed td { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.err-text { color: var(--danger); white-space: normal; }
.col-actions.nowrap .pill-row { flex-wrap: nowrap; }
/* A narrow table folds its secondary columns (.col-wide, then .col-mid) under the primary cell.
   900px, not 760px, because the 168px admin rail stays until 760px. */
.narrow-only, .narrow-xs-only { display: none; }
@media (max-width: 900px) { .col-wide { display: none; } .narrow-only { display: block; } }
@media (max-width: 560px) { .col-mid { display: none; } .narrow-xs-only { display: block; margin-top: 2px; } }

.mode-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0 0 12px; }
.mode-switch button {
  padding: 5px 12px; font-size: .84rem; color: var(--muted);
  background: none; border: 0; cursor: pointer;
}
.mode-switch button.on { color: var(--bg); background: var(--ink); font-weight: 600; }

/* Custom dropdowns on the room access grant form. A <details> so they open without JS. */
.picker-field { position: relative; }
.picker > summary {
  list-style: none; cursor: pointer; box-sizing: border-box; height: 38px; padding: 8px 11px; line-height: 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-3); color: var(--ink); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary::after { content: '\25BE'; float: right; margin-left: 8px; color: var(--muted); }
.picker[open] > summary { outline: 2px solid var(--blue, var(--accent)); outline-offset: -1px; }
.picker-panel {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); min-width: 340px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.picker-panel input[type=search] { width: 100%; box-sizing: border-box; }
.picker-list { max-height: 280px; overflow-y: auto; margin-top: 6px; }
.picker-sec { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 8px 6px 4px; }
.picker-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius); cursor: pointer; font-size: .9rem; font-weight: 400; margin: 0; }
.picker-opt:hover { background: var(--bg-3); }
.picker-opt[hidden], .picker-sec[hidden] { display: none; }
.picker-opt > input { flex-shrink: 0; margin: 0; }
.picker-opt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-opt > span:last-child { margin-left: auto; flex-shrink: 1; }
.picker-opt > span[data-picker-label]:last-child { margin-left: 0; }
.picker-opt:has(input:checked) { background: var(--bg-3); }
.picker-panel--level { left: auto; min-width: 380px; }
/* In-cell level picker (person page): reads as a value until hovered, like .role-select. */
.picker--inline { position: relative; display: inline-block; }
.picker--inline > summary { height: auto; padding: 3px 8px; line-height: 1.4; font-size: .82rem; border-color: transparent; background: transparent; }
.picker--inline:hover > summary, .picker--inline[open] > summary { border-color: var(--line-2); background: var(--bg); }
.picker--inline .picker-panel { left: 0; right: auto; }
@media (min-width: 761px) { .card.has-popover:has(> table) { overflow: visible; } }
.picker-panel--level .picker-list { max-height: none; margin-top: 0; }
.picker-opt--level { align-items: flex-start; padding: 7px 8px; }
.picker-opt--level > input { margin-top: 3px; }
.picker-opt > span.picker-text { display: flex; flex-direction: column; gap: 2px; margin-left: 0; white-space: normal; }
.picker-text > span:last-child { line-height: 1.35; }
@media (max-width: 760px) { .picker-panel { position: static; min-width: 0; margin-top: 4px; } }
