/* Frosty Coatings calendar v3.
 *
 * The tokens, the button, the card, the field, the sheet, the toast and the
 * gate all come from /assets/v2/app.css, which is loaded first. Nothing is
 * redefined here that already exists there: this file is the calendar and
 * only the calendar.
 *
 * Phone first, same as the map. Steve is on a laptop, the reps are on
 * iPhones, and both open the same page.
 */

:root {
  /* Height of one hour on the day and week grids. 64px means a 45 minute
     estimate draws 48px tall, so every appointment block clears the 44px tap
     target on its own without a minimum height fudging the geometry. */
  --hour: 64px;
  --gut: 46px;              /* the time gutter down the left of the grid */
  --bar-h: 108px;           /* toolbar, measured in JS, this is the first paint */
  --rail-w: 252px;
  /* Status pills. Every pair below was picked to clear WCAG AA on its own
     background, which the brand blue on white does not. */
  --pill-ok-bg: #ecfdf3;   --pill-ok-ink: #027a48;
  --pill-warn-bg: #fff6e6; --pill-warn-ink: #b54708;
  --pill-bad-bg: #fef3f2;  --pill-bad-ink: #b42318;
  --pill-mute-bg: #f2f4f7; --pill-mute-ink: #475467;
  --grid-line: #e9edf3;
  --now: #d92d20;
}

body.cal { overflow: hidden; background: var(--bg); }
/* The page sits between the portal bar and the edge of the screen. shell.js
   measures its own bar and writes those two numbers, and it puts the height
   on whichever side the bar actually landed on, so this one rule covers the
   bottom bar on a phone and the top bar on a laptop without repeating the
   breakpoint. The fallbacks mean the page is still right if the shell never
   loads. */
.shell {
  position: fixed; left: 0; right: 0;
  top: var(--fshell-top-h, 0px); bottom: var(--fshell-bottom-h, 0px);
  display: flex; flex-direction: column; min-height: 0;
}

/* ------------------------------------------------------------- toolbar */
.cbar {
  flex: none; background: #fff; border-bottom: 1px solid var(--line); z-index: 30;
  padding: calc(var(--safe-t) + 8px) 10px 8px;
}
.cbar { position: relative; }
.cbar.busy::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue);
  animation: bar 900ms linear infinite;
}
@keyframes bar { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
.cbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cbar-row.two { margin-top: 8px; }
.cbar-spacer { flex: 1; }
.logo-link { width: 40px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 10px; }
.logo-link img { width: 34px; height: auto; display: block; }
.logo-link:hover { background: var(--blue-tint); }
.period { flex: 1; min-width: 0; }
.period h1 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.period-sub { color: var(--mute); font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbar .icon-btn { box-shadow: none; border: 1px solid var(--line); background: #fff; position: relative; }
.cbar .icon-btn:hover { background: var(--blue-tint); color: var(--blue-deep); }
.icon-btn .badge {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--blue-deep); color: #fff; font-family: var(--head);
  font-weight: 700; font-size: 11px; line-height: 19px; text-align: center; border: 2px solid #fff;
}
/* On a phone the out of office button lives inside the sheet the people icon
   opens. Two icons plus Today left the date with 132px and it truncated. */
@media (max-width: 899px) { #ooo-btn { display: none; } }
.chip.demo { background: var(--amber-bg); color: var(--amber); }
/* app.css sizes a small button at 38px, which is under the 44px a thumb
   needs. Everything in this toolbar is thumb sized. */
.cbar .btn.small { min-height: 44px; }
.chip.demo::before { background: var(--amber); }

/* The view switch. Four equal buttons that shrink to fit a 390px phone
   rather than pushing the row wide. */
/* The switch never shrinks below four readable words. Anything that cannot
   fit beside it, such as the sample data marker, wraps under it instead of
   squeezing Day Week Month List down to D W M L. */
.seg { display: flex; gap: 3px; background: var(--bg-soft); border-radius: 12px; padding: 3px; flex: 1 1 214px; min-width: 214px; }
.seg button {
  flex: 1; min-width: 0; height: 38px; border: 0; background: transparent; border-radius: 9px;
  font-family: var(--head); font-weight: 700; font-size: 13px; color: var(--ink-2); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px;
}
.seg button[aria-selected="true"] { background: #fff; color: var(--blue-deep); box-shadow: 0 1px 3px rgba(16,24,40,0.16); }

/* ---------------------------------------------------------------- body */
.cmain { flex: 1; min-height: 0; display: flex; }
.rail { display: none; }
.stage { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* --------------------------------------------------------- unassigned
 * Bookings nobody covers are Steve's to place, so they never live only
 * inside a rep column where he would have to go looking for them. */
.unassigned {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--amber-bg); border-bottom: 1px solid rgba(181,71,8,0.22); overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.unassigned .ulab { font-family: var(--head); font-weight: 700; font-size: 12px; color: var(--amber); flex: none; }
.unassigned .uchip {
  flex: none; min-height: 44px; display: inline-flex; flex-direction: column; justify-content: center;
  gap: 1px; background: #fff; border: 1px solid rgba(181,71,8,0.35); border-radius: 10px;
  padding: 5px 11px; cursor: pointer; text-align: left; max-width: 190px;
}
.unassigned .uchip b { font-family: var(--head); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.unassigned .uchip small { color: var(--mute); font-size: 11.5px; }

/* --------------------------------------------------------------- grid */
.grid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.grid-head, .allday, .grid-body {
  display: grid;
  grid-template-columns: var(--gut) repeat(var(--n), minmax(0, 1fr));
}
.grid-head { flex: none; border-bottom: 1px solid var(--line); background: #fff; }
.gutter-head { border-right: 1px solid var(--grid-line); }
.dayhead {
  padding: 6px 2px 7px; text-align: center; border-left: 1px solid var(--grid-line); min-width: 0;
  background: none; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; font: inherit;
}
.dayhead .dw { font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--head); font-weight: 700; }
.dayhead .dn { font-family: var(--head); font-weight: 800; font-size: 19px; line-height: 1.25; margin-top: 2px; }
/* Today is a filled disc, the same marker Google uses, so the eye finds it
   before it reads any number. */
.dayhead.is-today .dn { background: var(--blue-deep); color: #fff; border-radius: 999px; display: inline-block; min-width: 30px; padding: 1px 6px; }
.dayhead.is-today .dw { color: var(--blue-deep); }
.dayhead.is-past .dw, .dayhead.is-past .dn { color: var(--dim); }

.allday { flex: none; border-bottom: 1px solid var(--line); min-height: 0; background: var(--bg-soft); }
.allday.empty { display: none; }
.gutter-lab { font-size: 10.5px; color: var(--mute); padding: 6px 4px; text-align: right; border-right: 1px solid var(--grid-line); font-family: var(--head); font-weight: 700; }
.allday-cell { border-left: 1px solid var(--grid-line); padding: 4px 3px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.grid-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.grid-body { height: calc(24 * var(--hour)); position: relative; }
.gutter { position: relative; border-right: 1px solid var(--grid-line); }
.hourlab {
  position: absolute; right: 6px; transform: translateY(-50%); font-size: 10.5px; color: var(--mute);
  white-space: nowrap; font-family: var(--head); font-weight: 700;
}
.col {
  position: relative; border-left: 1px solid var(--grid-line); min-width: 0;
  /* The hour rules are painted, not elements: 24 more nodes per column on a
     week grid is 168 nodes doing nothing but drawing a line. */
  background-image: repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--hour));
}
.col.is-today { background-color: rgba(24,139,246,0.045); }
.col.is-weekend { background-color: rgba(16,24,40,0.018); }

/* ---------------------------------------------------------- the blocks
 * A block is a light tint of the rep's colour with a solid bar of that
 * colour down its left edge and the rep's own darkened ink for the name.
 * White on the raw rep colour was the obvious build and it fails AA on
 * three of the five palette colours, so the tint carries the identity and
 * the text stays readable whatever colour Steve hands a new rep. */
.ev {
  position: absolute; border-radius: 7px; padding: 3px 6px 3px 8px; overflow: hidden; cursor: pointer;
  border: 0; text-align: left; font: inherit; display: block; min-height: 44px;
  border-left: 4px solid var(--c); background: var(--tint); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(16,24,40,0.06);
}
.ev:hover { filter: brightness(0.97); }
.ev:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.ev b { display: block; font-family: var(--head); font-weight: 700; font-size: 12.5px; line-height: 1.2; color: var(--cink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev small { display: block; font-size: 11px; color: var(--ink-2); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev.done { opacity: 0.72; }
.ev.off { background: repeating-linear-gradient(135deg, var(--tint) 0 7px, #fff 7px 14px); }
.ev.off b { color: var(--ink-2); }
/* A cancelled estimate stays on the calendar, struck through, because the
   slot being free again is the thing Steve needs to see. */
.ev.cancelled b { text-decoration: line-through; }
.ev.cancelled { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ev.nudge b, .ev.nudge small { display: inline; }
.ev.nudge { padding-top: 1px; }
.ev.unassigned-ev { border-left-color: var(--amber); }

.nowline { position: absolute; left: 0; right: 0; height: 2px; background: var(--now); z-index: 5; pointer-events: none; }
.nowline::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--now); }

/* ------------------------------------------------------------- month */
.mo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mo-head { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-bottom: 1px solid var(--line); flex: none; }
.mo-head div { text-align: center; padding: 7px 2px; font-family: var(--head); font-weight: 700; font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.05em; }
.mo-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); grid-auto-rows: minmax(0, 1fr); overflow-y: auto; }
.mo-cell {
  border-left: 1px solid var(--grid-line); border-top: 1px solid var(--grid-line); min-width: 0; min-height: 62px;
  padding: 4px 3px; display: flex; flex-direction: column; gap: 3px; background: none; font: inherit;
  text-align: left; cursor: pointer; overflow: hidden;
}
.mo-cell:nth-child(7n+1) { border-left: 0; }
.mo-cell.off-month { background: var(--bg-soft); }
.mo-cell.off-month .mo-n { color: var(--dim); }
.mo-cell.is-selected { box-shadow: inset 0 0 0 2px var(--blue-deep); }
.mo-cell:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: -2px; }
.mo-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.mo-n { font-family: var(--head); font-weight: 700; font-size: 13px; text-align: center; flex: none; }
.mo-cell.is-today .mo-n { background: var(--blue-deep); color: #fff; border-radius: 999px; align-self: center; min-width: 24px; padding: 1px 5px; }
.mo-dots { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.mo-dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.mo-count { font-size: 10.5px; color: var(--mute); text-align: center; }
.mo-chip {
  display: block; width: 100%; text-align: left; border: 0; font: inherit; cursor: pointer;
  border-radius: 5px; padding: 3px 5px; background: var(--tint); color: var(--ink); min-height: 30px;
  border-left: 3px solid var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px;
}
.mo-chip b { font-family: var(--head); font-weight: 700; color: var(--cink); }
.mo-more { font-size: 10.5px; color: var(--blue-deep); font-family: var(--head); font-weight: 700; text-align: center; }
/* The agenda under the phone month grid. Google does the same thing, and it
   is the only way a month fits a 390px screen without a 20px tap target. */
.mo-agenda { flex: none; max-height: 42%; overflow-y: auto; border-top: 1px solid var(--line); padding: 4px 10px 14px; background: #fff; }
.mo-agenda h2 { font-size: 14px; padding: 10px 0 4px; position: sticky; top: 0; background: #fff; }

/* -------------------------------------------------------------- list */
.list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 24px; -webkit-overflow-scrolling: touch; }
.list h2 { font-size: 13px; color: var(--ink-2); padding: 14px 2px 6px; position: sticky; top: 0; background: #fff; z-index: 2; }
.list h2 span { color: var(--mute); font-family: var(--body); font-weight: 400; }
.list h2.is-today { color: var(--blue-deep); }
.lrow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 60px;
  margin-bottom: 6px;
}
.lrow:hover { border-color: var(--blue-line); background: var(--blue-tint); }
.lrow .when { flex: none; width: 74px; font-family: var(--head); font-weight: 700; font-size: 13px; }
.lrow .when small { display: block; color: var(--mute); font-weight: 400; font-size: 11px; font-family: var(--body); }
.lrow .bar { flex: none; width: 4px; align-self: stretch; border-radius: 3px; background: var(--c); }
.lrow .who { flex: 1; min-width: 0; }
.lrow .who b { display: block; font-family: var(--head); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .who small { display: block; color: var(--mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-note { padding: 34px 16px; text-align: center; color: var(--mute); font-size: 14px; line-height: 1.5; }

/* -------------------------------------------------------------- pills */
.pill {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px;
  font-family: var(--head); font-weight: 700; font-size: 11px; background: var(--pill-mute-bg); color: var(--pill-mute-ink);
  white-space: nowrap;
}
.pill.ok { background: var(--pill-ok-bg); color: var(--pill-ok-ink); }
.pill.warn { background: var(--pill-warn-bg); color: var(--pill-warn-ink); }
.pill.bad { background: var(--pill-bad-bg); color: var(--pill-bad-ink); }
.pill.blue { background: var(--blue-tint); color: var(--blue-deep); }

/* ---------------------------------------------------------- rep list */
.reps { display: block; }
.rep-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 8px;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 10px;
}
.rep-row:hover { background: var(--bg-soft); }
.rep-row .box {
  width: 22px; height: 22px; border-radius: 6px; flex: none; border: 2px solid var(--c); display: grid;
  place-items: center; background: #fff;
}
.rep-row[aria-pressed="true"] .box { background: var(--c); }
.rep-row .box svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3.4; fill: none; opacity: 0; }
.rep-row[aria-pressed="true"] .box svg { opacity: 1; }
.rep-row .nm { flex: 1; min-width: 0; font-family: var(--head); font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-row .n { color: var(--mute); font-size: 12.5px; font-family: var(--body); font-weight: 400; flex: none; }
.rep-row.unrow .box { border-color: var(--amber); }
.rep-row.unrow[aria-pressed="true"] .box { background: var(--amber); }
.rail-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 6px; }
.rail-head .lab { margin: 0; flex: 1; }
.linkish { border: 0; background: none; color: var(--blue-deep); font-family: var(--head); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 6px 8px; min-height: 44px; }
.linkish:hover { text-decoration: underline; }

/* --------------------------------------------------------- detail card */
.kv { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.kv .k { flex: none; width: 96px; color: var(--mute); font-size: 12.5px; }
.kv .v { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.kv .v b { font-family: var(--head); }
.tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 11px;
  background: var(--blue-tint); color: var(--blue-deep); text-decoration: none; font-family: var(--head); font-weight: 700; font-size: 15px;
}
.tel svg { width: 17px; height: 17px; }
.dotname { display: inline-flex; align-items: center; gap: 8px; }
.dotname i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.sel {
  width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 13px;
  background: #fff; font-size: 16px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px;
}
.sel:focus { border-color: var(--blue); outline: none; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* app.css styles small inside .rowline but not inside .switch, so the caption
   ran on from the label. */
.switch small { display: block; color: var(--mute); font-size: 12.5px; }
.warnbox { background: var(--amber-bg); border: 1px solid rgba(181,71,8,0.28); border-radius: 12px; padding: 12px; color: var(--amber); font-size: 13.5px; line-height: 1.45; }
.warnbox b { font-family: var(--head); }
/* The backlog line is a button when there is something to open. */
button.warnbox { font: inherit; width: 100%; text-align: left; cursor: pointer; min-height: 44px; }
button.warnbox:hover { background: #fdf0dc; }
.strandlist { list-style: none; margin: 10px 0 0; padding: 0; }
.strandlist li { padding: 8px 0; border-top: 1px solid rgba(181,71,8,0.25); font-size: 13px; color: var(--ink); }
.strandlist li b { font-family: var(--head); }

/* --------------------------------------------------------------- toast
 * Its own layer above the sheet, because a save failure has to be readable
 * while the sheet that caused it is still open. */
/* Clear of the portal bar. --fshell-bottom-h already carries the phone's safe
   area, which is why safe-b is the fallback rather than something added to it. */
.toastwrap { position: fixed; left: 10px; right: 10px; bottom: calc(var(--fshell-bottom-h, var(--safe-b)) + 14px); z-index: 50; display: flex; justify-content: center; pointer-events: none; }
.toastwrap .toast { pointer-events: auto; }

/* ------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  :root { --hour: 60px; --gut: 60px; }
  .cbar { padding: 10px 16px; }
  /* One row on a laptop: everything fits, so the second row folds into the
     first rather than eating 46px of calendar. */
  .cbar-row.two { margin-top: 0; }
  .cbar { display: flex; align-items: center; gap: 10px; }
  .cbar-row { flex: none; }
  .cbar-row.two { flex: 1; min-width: 0; }
  .period h1 { font-size: 19px; }
  .seg { flex: none; width: 300px; }
  /* Both of these live in the rail on a laptop, so the toolbar does not
     carry a second copy of them. */
  #reps-btn, #ooo-btn { display: none; }
  /* The portal bar carries the brand at this width, and shell.css hides its
     own brand block on a phone precisely because the page owns the header
     there. So the logo belongs to exactly one of the two bars at any width. */
  .logo-link { display: none; }
  .rail {
    display: block; width: var(--rail-w); flex: none; border-right: 1px solid var(--line);
    padding: 12px 10px; overflow-y: auto; background: #fff;
  }
  .rail > * + * { margin-top: 14px; }
  .mo-agenda { display: none; }
  .mo-cell { min-height: 104px; }
  .list { padding: 0 16px 30px; }
  .sel { font-size: 15px; min-height: 44px; }
  .toastwrap { left: auto; right: 24px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------- the audit fixes
 * Everything below was found by measuring the live page rather than by
 * reading it: a contrast sweep that resolves each element's real painted
 * ground, and a sweep for anything interactive under 44px.
 */

/* --dim is #98a2b3, which is 2.5 against white and fails AA at any size.
   Past days and days outside the month now use --mute, which passes, and the
   difference from a live day is carried by --ink on the live one. */
.dayhead.is-past .dw, .dayhead.is-past .dn { color: var(--mute); }
.dayhead .dn { color: var(--ink); }
.mo-cell.off-month .mo-n { color: var(--mute); }

/* The hover ground was the brand tint, which dropped the secondary line in a
   list row to 4.47. The soft grey keeps it at 4.8 and still reads as hover. */
.lrow:hover { border-color: var(--blue-line); background: var(--bg-soft); }

/* Tap targets. Every one of these measured under 44px in the sweep. */
.logo-link { width: 44px; }
.seg button { height: 44px; }
.linkish { min-width: 44px; }
.cal .btn.small { min-height: 44px; }
.cal .pw-toggle { min-height: 44px; }
.sheet-head .close {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 11px; background: var(--bg-soft);
  color: var(--mute); font-size: 22px; line-height: 1; cursor: pointer;
}
.sheet-head .close:hover { background: var(--line); color: var(--ink); }
.kv .v a { display: inline-flex; align-items: center; min-height: 44px; }
/* The slider itself stays the size app.css draws it, but the whole row is the
   label now, so the thing a thumb aims at is 60px tall. */
/* app.css draws a ghost danger button in --red #d92d20, which measures 4.44
   on white and misses AA by a hair. Same hue, darker, 7.1 on white. The map
   has the same button and the same shortfall, but app.css is not this page's
   to change. */
.cal .btn.danger { color: var(--pill-bad-ink); border-color: rgba(180, 35, 24, 0.4); }
.switch { cursor: pointer; }
textarea.in { resize: vertical; min-height: 62px; font-family: var(--body); line-height: 1.4; }