/*
 * The component vocabulary. Every screen composes from these; a screen that
 * needs a new colour or radius adds a token, never a literal.
 */

/* ---- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: var(--text-2);
  font-size: 12.5px; cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .16s, color .16s, border-color .16s, filter .16s, transform .12s;
}
.btn:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500; }
.btn-accent:hover { filter: brightness(1.08); background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--panel-3); }
.btn-danger { color: var(--bad); }
.btn-danger:hover { background: var(--bad-soft); color: var(--bad); }
.btn-dashed { border-style: dashed; border-color: var(--border-2); background: transparent; box-shadow: none; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-icon { width: 28px; height: 28px; padding: 0; }
.btn-block { width: 100%; }

/* ---- cards ------------------------------------------------------------- */
.card {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card-accent { border-left: 3px solid var(--accent); }

.card-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}

.card-title { font-size: 14px; font-weight: 500; }
.card-sub { font-size: 12px; color: var(--text-3); }
.card-body { padding: 18px; }
.card-body-flush { padding: 0; }
.card-foot {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.section-num {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

/* ---- fields ------------------------------------------------------------ */
.field { display: block; }

/* The field is the tooltip's positioning context, so the tip can sit above the
   label without the control's own box growing. */
.field { position: relative; }

.field-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}

/* Decorative. The description reaches assistive tech through the widget's own
   aria-describedby, which points at .field-tip. */
.field-info {
  display: inline-grid;
  place-items: center;
  color: var(--text-3);
  cursor: help;
}

.field-info:hover { color: var(--text-2); }

/*
 * Hidden by default but never removed from the layout-independent flow: it is
 * absolutely positioned, so showing it cannot shift a single control. That is
 * the whole point — a hint that changes a field's height breaks row alignment.
 */
.field-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% - 2px);
  z-index: 40;
  max-width: 260px;
  width: max-content;
  padding: 7px 9px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-pop);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  pointer-events: none;
}

/* Mouse users hover the icon; keyboard users get it just by tabbing into the
   control, so no field needs an extra tab stop. */
.field:hover .field-tip,
.field:focus-within .field-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.field-hint { margin-top: 6px; font-size: 11px; color: var(--text-3); }

.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--bad);
}

.input, .select, .textarea {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 12.5px;
  outline: 0;
  transition: border-color .16s, box-shadow .16s;
}

.textarea { height: auto; min-height: 36px; padding: 8px 10px; resize: vertical; line-height: 1.45; }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* A file input carries a button inside it, which needs room `.input`'s fixed
   36px denies it — the browser clips or crowds its own control. Same border and
   radius, so it still reads as one of the house controls beside the text boxes
   it sits next to on the company profile. */
.input[type="file"] { height: auto; padding: 7px 10px; line-height: 1.4; }

.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input[disabled], .select[disabled], .textarea[disabled] { opacity: .55; cursor: not-allowed; }

.select {
  appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.input-sm, .select-sm { height: 30px; font-size: 12px; border-radius: 8px; }
.input-mono { font-family: var(--font-mono); }
.input-invalid { border-color: var(--bad); }
.input-upper { text-transform: uppercase; }

.checkbox {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.check-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }

/* A group of checkboxes rendered by Django's own CheckboxSelectMultiple: a
   wrapping <div>, one <div> per choice, each holding <label><input> Text.
   Styled here rather than in a screen because any form with a multi-select
   group wants exactly this, and screens.css may not define vocabulary
   (Rule 5). Descendant selectors, not child ones — Django groups optgroup-
   style choices one level deeper. */
.check-list div { min-width: 0; }
.check-list label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
  padding: 3px 0;
}
/* Radios share the row shape: a role picker and a feature grid sit on the same
   screen (accounts/user_form.html) and would otherwise disagree by two pixels. */
.check-list input[type="checkbox"],
.check-list input[type="radio"] {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---- choice cards ------------------------------------------------------
   A radio or checkbox drawn as a pressable card with a line of explanation,
   for choices that are decisions rather than preferences — granting a
   colleague access to the desk's buy rates is not a settings toggle.

   Django's CheckboxSelectMultiple / RadioSelect wrap the group in one <div>
   and each option in another, so the grid lives on that inner wrapper and the
   consuming screen only has to supply `.choice-cards` around the field. The
   input is off-screen rather than `display: none`: it keeps its place in the
   tab order and its accessible name, and `:focus-visible` still rings the
   card. Every state comes off `:checked`, so this works with scripting off. */
.choice-cards > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

/* Every card the same height as its neighbours, whatever its blurb runs to.
   Django wraps each option in a <div> of its own; that wrapper stretches to
   the row as a grid item, but the <label> inside it is block-level and sizes
   to its own content — which is why a two-line explanation next to a one-line
   one used to read as two mismatched tiles. Making the wrapper a grid too
   hands the stretch through to the card. */
.choice-cards > div > div { display: grid; }

.choice-card {
  display: block;
  position: relative;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.choice-card:hover { border-color: var(--border-2); background: var(--panel-2); }

.choice-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.choice-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.choice-card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.choice-card-blurb { font-size: 11.5px; line-height: 1.45; color: var(--text-3); }

/* The tick is the only thing that appears on selection, so it is what the eye
   lands on; the border and tint carry the state at a glance from further out. */
.choice-card-tick { opacity: 0; color: var(--accent); transition: opacity .12s; }

.choice-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.choice-card:has(input:checked) .choice-card-name { color: var(--text); }
.choice-card:has(input:checked) .choice-card-tick { opacity: 1; }

.choice-card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- badges ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-neutral { background: var(--neutral-soft); color: var(--neutral); }

/* A badge that is really a button. Same shape and colour — the badge already
   says what the number is — plus the affordances a `<button>` needs and does
   not inherit: no UA chrome, a pointer, and something that happens on hover so
   a figure in a table of figures reads as the one you can press. */
.badge-button {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: filter .16s, transform .12s;
}

.badge-button:hover { filter: brightness(1.08); }
.badge-button:active { transform: scale(.96); }

/* ---- chips & stat labels ------------------------------------------------ */
/* Moved from screens.css: both are consumed by reusable partials
   (_airline_option.html, _totals.html), not by one screen. */
.avatar-chip {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

.option-stat-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---- data grid --------------------------------------------------------- */
.data-grid { width: 100%; font-size: 12.5px; }

.data-grid-head th {
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  white-space: nowrap;
}

.data-grid-row { height: var(--rowh); border-bottom: 1px solid var(--border); }
.data-grid-row:hover { background: var(--panel-2); }
.data-grid-row > td { padding: 0 12px; vertical-align: middle; }
.data-grid-row-tall > td { padding: 8px 12px; }
.data-grid tbody tr:last-child { border-bottom: 0; }

.data-grid-foot td, .data-grid-foot th {
  height: 38px;
  padding: 0 12px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  font-weight: 500;
  text-align: left;
}

.data-grid-row-best { background: var(--ok-soft); }
.data-grid-row-best:hover { background: var(--ok-soft); }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

th.num, td.num { text-align: right; }

.scroll-x { overflow-x: auto; }

/* ---- popover ----------------------------------------------------------- */
.popover {
  position: absolute;
  z-index: 30;
  border: 1px solid var(--border-2);
  background: var(--panel);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  animation: popIn .16s cubic-bezier(.2, .8, .2, 1) both;
}

.popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.popover-item:hover, .popover-item[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}

/* Keyboard-navigated airport typeahead result (see airport.js). */
.popover-item.is-active { background: var(--accent-soft); }

/* Command palette: the trigger is a .btn, the overlay is the only bit of
   positioning the .popover cannot supply on its own. */
.palette-trigger { width: 268px; justify-content: flex-start; color: var(--text-3); }
.palette-trigger:hover { color: var(--text-2); }

.palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-top: 14vh;
  background: var(--scrim);
  animation: fadeIn .14s both;
}

.palette-panel { position: relative; width: min(520px, calc(100vw - 32px)); padding: 8px; }

/* ---- drawer ------------------------------------------------------------ */
/* A right-hand panel for reference material that belongs beside a screen but
   not inside it. Same two pieces as the palette above — a fixed scrim and a
   panel on top — but anchored to the right edge and full height, because what
   it holds is a table rather than a list of commands.

   It sits *over* the page rather than displacing it: the quotation builder's
   12-column grid has nowhere to shrink to, and a layout that reflows while
   somebody is typing into it is worse than one that is briefly covered. */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  justify-content: flex-end;
  background: var(--scrim);
  animation: fadeIn .14s both;
}

.drawer {
  display: flex;
  flex-direction: column;
  width: min(1040px, 75vw);
  max-width: 100vw;
  height: 100%;
  border-left: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-pop);
  animation: slideInRight .2s cubic-bezier(.2, .8, .2, 1) both;
}

.drawer-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}

.drawer-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.drawer-sub { color: var(--text-3); font-size: 12px; }

.drawer-body {
  flex: 1;
  padding: 16px 18px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 860px) {
  .drawer { width: 100vw; border-left: 0; }
}

/* ---- toasts ------------------------------------------------------------ */
.toast-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  min-width: 240px;
  max-width: 380px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-pop);
  font-size: 12.5px;
  animation: barUp .22s cubic-bezier(.2, .8, .2, 1) both;
}

/* ---- keyboard hints ---------------------------------------------------- */
.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--text-3);
  background: var(--panel-2);
  transition: opacity .16s;
}

/* ---- segmented control ------------------------------------------------- */
.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 10px;
}

.segmented-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: background .16s, color .16s, box-shadow .16s;
}
.segmented-item:hover { color: var(--text); text-decoration: none; }

/* aria-pressed and aria-current are both valid "active" markers on a
   segmented item — pressed for a real <button role="button">, current for an
   <a> acting as an in-page anchor (the builder's section pills). */
.segmented-item[aria-pressed="true"],
.segmented-item[aria-current="true"] {
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);
}

/* ---- gross profit ------------------------------------------------------
   Three tones for one figure, and the third is the point: a margin that
   cannot be computed is not zero and not bad, it is unknown, and it reads
   as quiet grey rather than as a number. No new tokens — a profit is the
   same green as any other good outcome. */
.gp-positive { color: var(--ok); }
.gp-negative { color: var(--bad); }
.gp-unknown { color: var(--text-3); font-weight: 400; }

/* The percentage trails the amount and is the thing the eye should land on,
   so it stays full strength while the amount beside it recedes. */
.rail-margin-pct { font-weight: 600; }
.rail-margin .num > span:first-child { opacity: .75; margin-right: 4px; }

/* ---- timeline ---------------------------------------------------------- */
.timeline { position: relative; display: flex; flex-direction: column; gap: 16px; }

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  font-size: 12.5px;
}

.timeline-dot {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin: 5px 0 0 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* State modifiers, for a timeline that is a *plan* rather than a history: a
   carrier's checkpoints all happened, but a job's steps are done, late,
   blocked or still ahead. Tokens only — a literal here would be a colour the
   theme switch cannot follow (Rule 5). */
.timeline-dot-ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.timeline-dot-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.timeline-dot-bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }

/* An unplanned or future step is deliberately quieter than the accent default:
   on a twelve-step plan, colouring everything makes the two rows that need
   attention invisible. */
.timeline-dot-neutral { background: var(--text-3); box-shadow: 0 0 0 3px var(--line); }

.timeline-line {
  position: absolute;
  left: 8px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border-2);
}

/* ---- alerts ------------------------------------------------------------ */
.alert {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
}

.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert-warn { background: var(--warn-soft); color: var(--warn); }
.alert-bad { background: var(--bad-soft); color: var(--bad); }
/* Tones for the remaining Django message levels (see the `message_tone` filter). */
.alert-accent { background: var(--accent-soft); color: var(--accent); }
.alert-neutral { background: var(--neutral-soft); color: var(--neutral); }
.alert ul { list-style: none; }

/* ---- skeleton ---------------------------------------------------------- */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--panel-2) 0%,
    var(--panel-3) 40%,
    var(--panel-2) 80%
  );
  background-size: 420px 100%;
  animation: shimmer 1.3s linear infinite;
}

/* ---- meter --------------------------------------------------------------- */
/* A proportion of a known ceiling — credit used against a credit limit being
   the first. Two elements rather than `<progress>`: the native element cannot
   be given a fill colour that changes with its own value without the same
   per-state rules, and its shadow DOM differs across engines.

   The state classes carry the meaning, not the width: a bar at 96% and a bar
   at 104% look nearly identical, so the colour is what says which side of the
   line it fell on. `--meter-fill` is set inline by the template because only
   the server knows the number. */
.meter {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-3);
  overflow: hidden;
}
.meter-fill {
  display: block;
  height: 100%;
  width: var(--meter-fill, 0%);
  border-radius: inherit;
  background: var(--ok);
  transition: width 0.2s ease;
}
.meter-warn .meter-fill { background: var(--warn); }
.meter-bad .meter-fill { background: var(--bad); }

/* ---- grid utilities ------------------------------------------------------ */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap, 14px); }
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}

/* ---- layout utilities -------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--gap, 12px); }
.row { display: flex; align-items: center; gap: var(--gap, 10px); }
.spacer { flex: 1; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.bad { color: var(--bad); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- narrow viewports --------------------------------------------------- */
/*
 * Two steps, because a 12-column field grid does not go straight from three
 * fields abreast to one: a tablet still has room for two. `.col-6` and wider
 * are already halves or better, so only the narrower spans are widened at the
 * first step — a `.col-12` must never become a half.
 */
@media (max-width: 900px) {
  .col-1, .col-2, .col-3, .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8, .col-9, .col-10, .col-11 { grid-column: span 12; }
}

@media (max-width: 620px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6 { grid-column: span 12; }
}

@media (max-width: 860px) {
  /* A toolbar is a `.row`: a search box, a filter and two buttons that fit
     side by side on a desk and cannot on a phone. Wrapping only takes effect
     where the row would otherwise overflow, so nothing above this width
     moves. */
  .row { flex-wrap: wrap; }

  /* The palette is a keyboard affordance — its trigger says "⌘K" — and it is
     268px of a 390px topbar. The drawer is the navigation on a phone. */
  .palette-trigger { display: none; }

  /* Corner-pinned toasts, given the width they need at 390px. */
  .toast-host { right: 12px; left: 12px; bottom: 12px; }
  .toast { min-width: 0; max-width: none; }

  /* A card footer holding two or three buttons: side by side they overflow,
     and a half-visible Cancel is worse than a stacked one. */
  .card-foot.row { flex-wrap: wrap; }
}
