/* Settlement Calculator: what the page adds to the Payslip Check design
   system (app.css). Same tokens, same shell, same components; these are the
   pieces only this page needs. */

.settle form[data-form] { display: contents; }
.settle .view { gap: 24px; }
.settle .runbar .spacer { flex: 1; }
.settle .runbar [data-back] { margin-right: auto; }
.settle .field-age { flex: 0 0 190px; }
.cond { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px; border-radius: var(--radius-xl); background: hsl(var(--foreground) / 0.03); border: 1px solid var(--line); }
.q .cond { margin-top: 6px; }
.err-line { font-style: normal; font-size: 13px; color: hsl(var(--destructive)); }
.err-line:empty { display: none; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: hsl(var(--destructive)); }
.seg[aria-invalid="true"] span { border-color: hsl(var(--destructive) / 0.6); }

.msg.info { background: hsl(var(--info-subtle)); color: hsl(var(--info-foreground)); }
.msg.good { background: var(--rag-green); color: var(--rag-green-ink); }
.msg ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.msg p { margin: 0; }
.msg p + p { margin-top: 6px; }

/* ── The pickers (visa and job): the app's combobox, with groups and hints ── */
.combo input[role="combobox"] { padding-right: 46px; }
.combo-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-md); background: none; cursor: pointer;
  color: hsl(var(--foreground));
}
.combo-toggle:hover { background: var(--coral-subtle); }
.combo-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-normal); }
.combo input[aria-expanded="true"] ~ .combo-toggle svg { transform: rotate(180deg); }
.combo .combo-panel { max-height: min(360px, 52vh); }
.combo-group { padding: 12px 11px 5px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--foreground-muted)); }
.combo-group:first-child { padding-top: 5px; }
.combo .combo-option { align-items: center; justify-content: space-between; }
.combo-hint { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: hsl(var(--foreground-muted)); }
.combo-option.is-current .combo-name::before { content: "✓ "; color: var(--coral-ink); font-weight: 700; }
.combo-tag { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: hsl(var(--foreground) / 0.06); color: hsl(var(--foreground-muted)); white-space: nowrap; }
.combo-tag[data-kind="temporary"] { background: var(--rag-red); color: var(--rag-red-ink); }
.combo-empty { padding: 12px 11px; font-size: 13.5px; line-height: 1.45; color: hsl(var(--foreground-muted)); }
.combo-empty + .combo-option { border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); margin-top: 4px; padding-top: 11px; }
.route-picked { font-size: 13px; font-weight: 600; color: hsl(var(--success-foreground)); }

/* ── The questions: one block each, shown one after another ───────────── */
.qs { display: flex; flex-direction: column; gap: 24px; }
.q { display: flex; flex-direction: column; gap: 14px; }
/* The record's questions are divided like the rule list */
.qs.lined { gap: 0; }
.qs.lined > .q { padding: 16px 0; border-top: 1px solid var(--line); }
/* The first question showing (earlier ones may be hidden for the route) */
.qs.lined > .q:not(.q:not([hidden]) ~ .q) { border-top: 0; padding-top: 0; }
/* A question that has just appeared */
.q.reveal { animation: reveal 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .q.reveal { animation: none; } }
/* A lone date or number: not the full width */
.field-short { max-width: 340px; }
/* The date and the age on one line: labels on top, the boxes in line, the
   help under each box, so a longer note never pushes a box down. */
.row-dates { align-items: flex-start; }
.row-dates .field-age { flex: 0 0 200px; }
.field-below > label:first-child { min-height: 21px; }
.field-below .help { order: 3; }
.field-below em { order: 4; }
.same-note { margin: 2px 0 0; }
.same-note:empty { display: none; }
.more-years { align-self: flex-start; font-weight: 600; color: hsl(var(--foreground)); text-decoration: none; }
.more-years::before { content: ""; }
.more-years:hover { text-decoration: underline; }

/* ── Earnings ──────────────────────────────────────────────────────────── */
.paynow .money { max-width: 340px; }
.paynow .money input { font-size: 20px; padding: 12px 14px 12px 31px; font-variant-numeric: tabular-nums; }
.paynow .money::before { font-size: 18px; left: 14px; }

.years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.year { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); cursor: text; transition: border-color var(--duration-fast); }
.year:hover { border-color: var(--coral); }
.year-h { display: flex; flex-direction: column; gap: 1px; min-height: 36px; }
.year-h b { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: 0.02em; }
.year-h small { font-size: 12px; line-height: 1.3; color: hsl(var(--foreground-muted)); }
.year .money input { font-variant-numeric: tabular-nums; }
.year.current { border-color: var(--coral-ink); background: var(--coral-subtle); }
.year.current .year-h small { color: hsl(var(--foreground)); font-weight: 600; }
.year[data-before="true"] { background: transparent; border-style: dashed; }
.year-band { display: none; align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.year:not([data-band=""]) .year-band { display: inline-flex; }
.year[data-band="additional"] .year-band, .year[data-band="higher"] .year-band { background: var(--rag-green); color: var(--rag-green-ink); }
.year[data-band="minimum"] .year-band { background: hsl(var(--foreground) / 0.06); color: hsl(var(--foreground-muted)); }
.year[data-band="low"] .year-band { background: var(--rag-amber); color: var(--rag-amber-ink); }
/* Figures the quick fill put in: the app's "filled for you" tint */
.year input.filled { background: var(--doc-fill); border-color: var(--doc-edge); }
.fill-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.fill-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  border: 1px dashed var(--coral-ink); border-radius: var(--radius-full); background: var(--coral-subtle);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.fill-btn::before { content: "+"; font-weight: 700; color: var(--orange-500); }
.fill-btn:hover { background: var(--coral); border-style: solid; }
.fill-btn:focus-visible { outline: 2px solid var(--coral-ink); outline-offset: 2px; }
.fill-row .help { flex: 1 1 220px; }
.years-note { margin: 0; }

.thresholds { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
.thresholds > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; }
.thresholds > div + div { border-left: 1px solid var(--line); }
.thresholds b { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.15; }
.thresholds span { font-size: 12.5px; line-height: 1.4; color: hsl(var(--foreground-muted)); }
.thresholds strong { color: hsl(var(--foreground)); font-weight: 700; }

/* ── Result ────────────────────────────────────────────────────────────── */
/* The result sits in a table so its header and footer can repeat on paper;
   on screen the table is plain blocks and the body is the view's column. */
.sheet, .sheet > tbody, .sheet > tbody > tr, .sheet > tbody > tr > td { display: block; width: 100%; }
.sheet > thead, .sheet > tfoot { display: none; }
.sheet > tbody > tr > td.sheet-body { display: flex; flex-direction: column; gap: 24px; }
.settle .vhead-row .vh { font-size: 34px; }
.settle .vh .date { white-space: nowrap; }
.recap { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: hsl(var(--foreground-muted)); }
.settle .runbar [data-rerun] { white-space: normal; text-align: left; }

/* Time line: start → today → earliest date */
.timeline { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 16px; border-radius: var(--radius-xl); background: var(--coral-subtle); border: 1px solid hsl(var(--primary)); }
.tl-figs { display: flex; flex-wrap: wrap; gap: 10px 0; }
.tl-fig { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 0 16px; }
.tl-fig:first-child { padding-left: 0; }
.tl-fig + .tl-fig { border-left: 1px solid hsl(var(--primary)); }
.tl-fig small { font-size: 12.5px; color: hsl(var(--foreground-muted)); }
.tl-fig b { font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px, 1.75vw, 24px); line-height: 1.15; }
.tl-track { position: relative; height: 12px; margin-top: 10px; border-radius: var(--radius-full); background: hsl(var(--card)); overflow: hidden; }
.tl-fill { height: 100%; border-radius: var(--radius-full); background: var(--ink); min-width: 12px; }
.tl-ends { display: flex; justify-content: space-between; font-size: 12.5px; color: hsl(var(--foreground-muted)); }

/* Today's rules, until Earned Settlement starts */
.msg.today { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--coral-ink); color: hsl(var(--foreground)); }
.msg.today .mh { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-500); margin-bottom: 6px; }
.msg.today b { white-space: nowrap; }

/* The 3 / 5 / 10 / 20 ladder */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rung { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 15px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); min-width: 0; }
.rung-y { display: flex; align-items: baseline; gap: 6px; }
.rung-y b { font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.01em; }
.rung-y span { font-size: 13px; color: hsl(var(--foreground-muted)); }
.rung[data-state] .rung-y .plus { font-family: var(--font-sans); font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--rag-red); color: var(--rag-red-ink); }
.rung-l { font-size: 14px; font-weight: 600; line-height: 1.3; }
.rung-d { font-size: 13px; line-height: 1.45; color: hsl(var(--foreground-muted)); }
.rung-date { font-size: 13.5px; font-weight: 600; }
.rung[data-state="closed"] { background: transparent; border-style: dashed; }
.rung[data-state="closed"] .rung-y b, .rung[data-state="closed"] .rung-l { color: hsl(var(--foreground-muted)); }
.rung[data-state="open"] .rung-date { color: hsl(var(--foreground-muted)); }
.rung[data-state="chosen"] { background: var(--ink); border-color: var(--ink); color: hsl(var(--foreground-inverse)); }
.rung[data-state="chosen"] .rung-y span, .rung[data-state="chosen"] .rung-d { color: hsl(var(--foreground-inverse) / 0.75); }
.rung[data-state="chosen"] .rung-date { color: var(--coral); }
.rung-badge { position: absolute; top: 12px; right: 12px; padding: 2px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--coral); color: hsl(var(--foreground)); }

/* Requirements reuse .rules/.rule; the right column is a status word */
.settle .rule { grid-template-columns: 26px 1fr auto; }
.settle .rule .rule-status { white-space: nowrap; }
.settle .rule[data-rag="exempt"] .icon { background: hsl(var(--foreground) / 0.07); color: hsl(var(--foreground-muted)); }
.settle .rule[data-rag="exempt"] .rule-status { color: hsl(var(--foreground-muted)); }
.settle .rule[data-rag="path"] .icon { background: var(--ink); color: var(--coral); }
.settle .rule[data-rag="path"] .rule-status { color: hsl(var(--foreground)); }

/* Earnings bars against the thresholds */
.bars-wrap { overflow-x: auto; padding: 4px 0 2px; }
.bars { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(46px, 1fr)); gap: 8px; align-items: end; height: 190px; padding: 0 64px 0 2px; position: relative; }
.bar { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; min-width: 0; transition: opacity var(--duration-normal); }
.bar-col { width: 100%; max-width: 54px; border-radius: 8px 8px 3px 3px; background: hsl(var(--foreground) / 0.14); min-height: 3px; }
.bar[data-band="minimum"] .bar-col { background: var(--rag-green-dot); }
.bar[data-band="higher"] .bar-col, .bar[data-band="additional"] .bar-col { background: var(--ink); }
.bar[data-future="true"] .bar-col { background-image: repeating-linear-gradient(135deg, hsl(0 0% 100% / 0.32) 0 5px, transparent 5px 10px); }
.bar[data-window="false"] { opacity: 0.4; }
.bar-v { font-size: 12px; font-weight: 600; white-space: nowrap; }
.bar-y { font-family: var(--font-mono); font-size: 11px; color: hsl(var(--foreground-muted)); white-space: nowrap; }
.bar-y .y-s { display: none; }
.bar-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed hsl(var(--foreground) / 0.35); z-index: 2; pointer-events: none; }
.bar-line span { position: absolute; right: 0; top: -8px; font-size: 11px; color: hsl(var(--foreground-muted)); background: var(--paper); padding: 0 4px; }

@media screen and (max-width: 960px) {
  .settle .runbar { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; }
  .settle .runbar .btn-ink { width: 100%; }
  .settle .runbar p { width: 100%; }
  .settle .vhead-row .vh { font-size: 28px; }
  .years { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 640px) {
  .settle .field-row { flex-direction: column; }
  .settle .field-age, .row-dates .field-age { flex: none; }
  .field-short { max-width: none; }
  .paynow .money { max-width: none; }
  .thresholds { grid-template-columns: 1fr; }
  .thresholds > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .years { grid-template-columns: 1fr 1fr; }
  .ladder { grid-template-columns: 1fr 1fr; }
  .tl-fig { flex-basis: 100%; padding: 0; }
  .tl-fig + .tl-fig { border-left: 0; border-top: 1px solid hsl(var(--primary)); padding-top: 8px; }
  .bars { gap: 4px; height: 186px; padding-right: 50px; grid-template-columns: repeat(var(--cols, 7), minmax(26px, 1fr)); }
  .bar-v { font-size: 10px; }
  .bar-y { font-size: 9.5px; }
  .bar-y .y-l { display: none; }
  .bar-y .y-s { display: inline; }
  .settle .rule { grid-template-columns: 26px 1fr; }
  .settle .rule .rule-status { grid-column: 2; }
  .combo-tag { display: none; }
}

/* ── Keep this result: the email card ──────────────────────────────── */
.keep { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); }
.keep-form { display: flex; flex-direction: column; gap: 14px; }
.keep-copy { display: flex; flex-direction: column; gap: 6px; }
.keep-h { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.15; }
.keep-p { margin: 0; font-size: 14.5px; line-height: 1.5; color: hsl(var(--foreground-muted)); max-width: 62ch; }
.keep-row { display: flex; gap: 10px; align-items: flex-start; }
.keep-email { flex: 1 1 240px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.keep-consent { margin: 0; font-size: 12.5px; line-height: 1.5; color: hsl(var(--foreground-muted)); max-width: 70ch; }
.keep-privacy { font-size: 13px; line-height: 1.5; color: hsl(var(--foreground-muted)); }
.keep-privacy summary { width: fit-content; cursor: pointer; font-weight: 600; color: hsl(var(--foreground)); }
.keep-privacy summary:focus-visible { outline: 2px solid var(--coral-ink); outline-offset: 3px; border-radius: 4px; }
.keep-privacy p { margin: 8px 0 0; max-width: 70ch; }
.keep-done { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
@media screen and (max-width: 640px) {
  .keep { padding: 18px 16px; }
  .keep-row { flex-direction: column; align-items: stretch; }
  .keep-email { flex: none; }
  .keep-row .btn-ink { width: 100%; }
}

/* ── Save as PDF: the result as a report ─────────────────────────────── */
/* A white A4 page. The result is laid out as a table whose header and footer
   groups repeat on every printed page (the Borderless header, the note and
   booking link), with clearer borders than on screen, and cards that don't
   split across pages. */
@media print {
  @page { size: A4; margin: 12mm 15mm 12mm; }
  html, body.settle { background: #fff !important; color: #202129; }
  :root { --line: #cfcac0; --paper: #fff; }
  body.settle > main.calc-wrap { display: block !important; padding: 0; min-height: 0; }
  body.settle > .ft { display: none !important; }
  .settle .calc-shell { display: block; box-shadow: none; border-radius: 0; min-height: 0; background: #fff; }
  .settle .persuade, .settle form, .settle .noprint, .settle .toast, .settle .btn-coral { display: none !important; }
  .settle .print-only { display: block; }
  .settle .calc-main { padding: 0; }
  .settle .view[data-view="result"] { display: block !important; }
  .settle .sheet { display: table; width: 100%; border-collapse: collapse; }
  .settle .sheet > tbody { display: table-row-group; }
  .settle .sheet tr { display: table-row; }
  .settle .sheet td { display: table-cell; padding: 0; vertical-align: top; }
  .settle .sheet > tbody > tr > td.sheet-body { display: block; }
  .settle .sheet-body > * { margin: 0 0 14px; }
  .settle * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* The header and footer on every page */
  .settle .sheet > thead { display: table-header-group; }
  .settle .sheet > tfoot { display: table-footer-group; }
  .settle .print-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12mm; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #5b5b5b; }
  .settle .sheet > thead td { padding-top: 3mm; }
  .settle .sheet > thead .print-bar { padding: 0 0 3mm; margin-bottom: 6mm; border-bottom: 1.5px solid #202129; }
  .settle .sheet > thead b { font-family: var(--font-serif); font-weight: 400; font-size: 19px; line-height: 1; letter-spacing: 0; text-transform: none; color: #202129; }
  .settle .sheet > tfoot .print-bar { align-items: flex-start; padding: 3mm 0 0; margin-top: 4mm; border-top: 1px solid #cfcac0; font-family: var(--font-sans); font-size: 8.5px; letter-spacing: 0; text-transform: none; }
  .settle .sheet > tfoot span:last-child { white-space: nowrap; }

  /* The report itself */
  .settle .vhead-row .vh { font-size: 27px; }
  .settle .vhead-row > div:not(.head-actions) { flex: 1 1 auto; }
  .settle .recap { font-size: 11.5px; }
  .settle .overall { border-width: 1.5px; }
  .settle .timeline { border-color: #202129; }
  .settle .rung, .settle .rule, .settle .timeline, .settle .msg, .settle .result-ink, .settle .bars, .settle .overall, .settle .rules-h { break-inside: avoid; }
  .settle .rules, .settle [data-earn-group], .settle [data-ladder-group] { break-inside: auto; }
  .settle .group-label, .settle .rules-h { break-after: avoid; }
  .settle .rules-h { padding-bottom: 8px; border-bottom: 1.5px solid #202129; }
  .settle .rule { border-top-color: #cfcac0; }
  .settle .rung[data-state="closed"] { border-style: solid; }
  .settle .bars-wrap { overflow: visible; }
  .settle .bar-line span { background: #fff; }
  .settle .result-ink { display: block; padding: 14px 18px; }
  .settle .result-ink .next-h { font-size: 20px; }
  .settle .result-ink .print-only { margin: 10px 0 0; font-weight: 600; color: #fff; }
  .settle .foot { border-top: 1px solid #cfcac0; padding-top: 10px; }
  .settle .disclaimer { font-size: 10.5px; }
}

/* ── The gate: the result, blurred, behind a card asking for an email ──
   The sheet and the card share one grid cell, so the card sits over the top
   of the result. While locked the sheet is cut short and fades out, so the
   page stays short (it's often shown in an iframe). */
.stage { display: grid; }
.stage > * { grid-area: 1 / 1; min-width: 0; }
.sheet.is-locked {
  max-height: 620px; overflow: hidden;
  filter: blur(10px); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(#000 45%, transparent 96%); mask-image: linear-gradient(#000 45%, transparent 96%);
}
.gate { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: center; padding: 36px 0 24px; }
.gate-card {
  width: min(100%, 470px); display: flex; flex-direction: column; gap: 18px;
  padding: 28px 28px 22px; border-radius: var(--radius-xl);
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px hsl(var(--foreground) / 0.5), 0 2px 10px hsl(var(--foreground) / 0.08);
  animation: gate-in 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes gate-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gate-card { animation: none; } }
.gate-copy { display: flex; flex-direction: column; gap: 8px; }
.gate-h { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 27px; line-height: 1.12; letter-spacing: -0.01em; }
.gate-h:focus { outline: none; }
.gate-p { margin: 0; font-size: 14.5px; line-height: 1.5; color: hsl(var(--foreground-muted)); }
.gate-checks { display: flex; flex-direction: column; gap: 10px; }
.gate-checks a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gate-checks a:hover { color: var(--coral-ink); }
.gate .btn-ink { width: 100%; }
.gate .keep-privacy { margin-top: -4px; }
.gate .err-line { margin: 0; }
@media screen and (max-width: 640px) {
  .gate { padding: 12px 0 20px; }
  .gate-card { padding: 22px 18px 18px; gap: 16px; }
  .gate-h { font-size: 24px; }
  .sheet.is-locked { max-height: 560px; }
}
@media print {
  /* Nothing to print until the result is unlocked. */
  .settle .sheet.is-locked { display: none !important; }
}