/* Lönespann — app styles.
 *
 * The visual language is the TCB brand profile (brand/design-profile.md): warm paper tones,
 * petrol accent, Lora for headings, Karla for body — both self-hosted from /shared/fonts, so
 * font-src 'self' holds and no off-origin request is ever made.
 *
 * Responsive strategy (app-ux-guide.md §3): mobile-first base styles, desktop layered on with
 * min-width queries, so resizing a window keeps working. Input is detected separately from size:
 * (pointer: fine) tightens control heights for a mouse, (hover: hover) is the only place hover
 * effects live, and :active gives touch its feedback. Type and spacing scale fluidly with
 * clamp() rather than jumping at the breakpoint.
 *
 * LIGHT-ONLY, by decision 18 extended to the apps on 2026-08-21: no prefers-color-scheme block,
 * and ui.css's four scheme-aware tokens are pinned below so the shared sheet's dark block cannot
 * fire through. This supersedes app-ux-guide.md §3's "respect prefers-color-scheme", which is
 * older than the decision — and it matters here more than in most apps: a chart whose palette
 * flips is a chart whose printed output does not match the screen (spec.md §9).
 *
 * Contrast: every text/background pair below is ≥ 4.5:1. --amber never carries body text. No
 * information is carried by colour alone — every danger colour is paired with a word.
 */

/* ── tokens ───────────────────────────────────────────────────────────────── */

:root {
  --bg:          #f6f2ea;
  --surface:     #fdfbf7;
  --surface-2:   #efe9dd;
  --ink:         #16191c;
  --ink-2:       #3f454b;
  --line:        #d8d0bf;
  --line-2:      #e5dfd2;
  --accent:      #0f4f5e;   /* --brand-petrol: the internal curve (spec.md §9) */
  --accent-hover:#0b3d49;
  --accent-ink:  #ffffff;
  --accent-2:    #e4eef0;
  --amber:       #a8763e;   /* --brand-amber: the external curve. 3.53:1 on paper —
                               a LINE may carry it, a LABEL may not. Labels are --ink. */
  --danger:      #93000e;
  --danger-bg:   #fbeceb;
  --warn:        #6a4a00;
  --warn-bg:     #f9f0d8;
  --ok:          #1c5c30;

  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(28, 24, 18, .05), 0 1px 6px rgba(28, 24, 18, .04);
  --tap: 44px;
  --gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --pad: clamp(1rem, 0.7rem + 1.5vw, 1.75rem);
  --measure: 34rem;

  --font: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* the shared widgets (ui.css) follow the app's face */
  --ui-font: var(--font);

  /* Pinned: this file loads after ui.css, so these unconditional declarations outrank its
     prefers-color-scheme block, which would otherwise put dark-scheme greys on light surfaces. */
  color-scheme: light;
  --ui-muted: #5c564a;
  --ui-line: #cfc7b8;
  --ui-danger: #b3261e;
  --ui-focus: #0b57d0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5rem;
  text-wrap: balance;
}
h1 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.1rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 .75rem; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.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;
}

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: .6rem .9rem; border: 2px solid var(--accent); border-radius: var(--radius);
}
.skip-link:focus { top: .5rem; }

.noscript { max-width: var(--measure); margin: 2rem auto; padding: 0 1rem; }
.boot { padding: 2rem var(--pad); color: var(--ink-2); }

/* ── app bar ──────────────────────────────────────────────────────────────── */

.appbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .65rem var(--pad);
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
}
.appbar__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--accent-hover);
  display: flex; align-items: center; gap: .55rem;
}
/* the brand mark rides along as a decorative image; the name carries the meaning */
.appbar__name::before {
  content: "";
  flex: 0 0 auto;
  width: 26px; height: 26px;
  background: url("/favicon.svg") center / contain no-repeat;
}
.appbar__name small {
  display: block;
  font-family: var(--font);
  font-weight: 400; font-size: .8rem;
  color: var(--ink-2);
}
.appbar__spacer { flex: 1 1 auto; }
.appbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ── the save bar: ONE line on this app ───────────────────────────────────
   "Sparad hos organisationen: …" answers the only question left — do my colleagues see this?
   The file line and its seven-day red retired with the file (spec.md §10, §13). A savebar with
   two lines here is a savebar that has grown a file back. */

.savebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: .55rem var(--pad);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.savebar__line { margin: 0; font-size: .95rem; }
.savebar__line[data-state="dirty"] { color: var(--warn); font-weight: 600; }
.savebar__line[data-state="stale"],
.savebar__line[data-state="never"] { color: var(--danger); font-weight: 600; }
.savebar__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

/* ── banners ──────────────────────────────────────────────────────────────── */

.banner {
  margin: .75rem var(--pad) 0;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .95rem;
}
.banner p:last-child { margin-bottom: 0; }
.banner--lapsed   { background: var(--danger-bg); border-color: var(--danger); }
.banner--unknown  { background: var(--warn-bg);   border-color: var(--warn); }
.banner--dev      { background: var(--danger-bg); border-color: var(--danger);
                    font-family: var(--mono); font-size: .85rem; }
.banner--first-run{ background: var(--accent-2);  border-color: var(--accent); }
.banner--notice   { background: var(--surface);   border-color: var(--line); }
.banner__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* ── layout ───────────────────────────────────────────────────────────────── */

main {
  padding: var(--gap) var(--pad) 7rem;   /* room for the phone's fixed primary action */
  max-width: 68rem;
  margin: 0 auto;
}

.stack > * + * { margin-top: var(--gap); }
.prose { max-width: var(--measure); }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow);
}
.card + .card { margin-top: var(--gap); }
.card--blocked { opacity: .72; border-style: dashed; }

/* ── controls ─────────────────────────────────────────────────────────────── */

button, .button {
  font: inherit;
  min-height: var(--tap);
  padding: .55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
button[data-variant="primary"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: 600;
}
button[disabled] { opacity: .55; cursor: not-allowed; }
@media (hover: hover) {
  button:hover { border-color: var(--accent); }
  button[data-variant="primary"]:hover { background: var(--accent-hover); }
}
button:active { transform: translateY(1px); }
@media (pointer: fine) { button, .button { min-height: 38px; } }

label { display: block; font-weight: 600; margin-bottom: .2rem; }
.field { margin-bottom: var(--gap); }
/* Persistent helper text under the label — never a placeholder, which vanishes exactly when the
   user still needs it, and never a tooltip, which does not exist on a phone (UX guide §2). */
.field__help { margin: 0 0 .35rem; font-size: .9rem; color: var(--ink-2); }
.field__error { margin: .3rem 0 0; font-size: .9rem; color: var(--danger); font-weight: 600; }

input[type="text"], input[type="number"], input[type="date"], select, textarea {
  font: inherit;
  width: 100%;
  min-height: var(--tap);
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
textarea { min-height: 7rem; resize: vertical; }

/* ── the percentile table ─────────────────────────────────────────────────── */

.spanntabell { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.spanntabell th, .spanntabell td { padding: .45rem .6rem; border-bottom: 1px solid var(--line-2); }
.spanntabell td { text-align: right; }
.spanntabell th:first-child, .spanntabell td:first-child { text-align: left; }
.spanntabell .vald { background: var(--accent-2); font-weight: 600; }
.spanntabell caption { caption-side: bottom; padding-top: .4rem; font-size: .9rem; color: var(--ink-2); }

/* A badge is a word, never a colour alone: "Beräknat värde" / "Anpassat spann" read the same to
   somebody who cannot tell the two apart. */
.badge {
  display: inline-block;
  margin-left: .4rem; padding: .05rem .4rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .78rem; color: var(--ink-2); background: var(--surface-2);
  white-space: nowrap;
}
.badge--derived { border-color: var(--amber); }
.badge--adjusted { border-color: var(--accent); }

/* On a phone: cards per percentile, never a table that scrolls sideways (UX guide §3). */
@media (max-width: 40rem) {
  .spanntabell, .spanntabell thead, .spanntabell tbody, .spanntabell tr, .spanntabell th, .spanntabell td {
    display: block;
  }
  .spanntabell thead { display: none; }
  .spanntabell tr {
    border: 1px solid var(--line-2); border-radius: var(--radius);
    padding: .5rem .7rem; margin-bottom: .6rem; background: var(--surface);
  }
  .spanntabell td { border: 0; display: flex; justify-content: space-between; gap: 1rem; }
  .spanntabell td::before { content: attr(data-label); font-weight: 600; color: var(--ink-2); }
  /* A row header IS the card's label. The statistics table uses one, so its value cell carries no
     `data-label` and the card reads "Antal (n)" / "12" rather than "Kronor per månad: 12". */
  .spanntabell tbody th { border: 0; text-align: left; font-weight: 600; color: var(--ink-2); }
  /* And a two-column measure/value table stays ONE line per measure on a phone. Seven cards for
     seven numbers is a scroll where a list would do; the wide percentile table is the one that
     genuinely needs a card per row. */
  .spanntabell--matt tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .spanntabell--matt td { display: block; }
  /* A caption inside a table whose rows are blocks keeps shrinking to fit, which turns four words
     into four lines. Seen on a 390 px screen, not reasoned about. */
  .spanntabell caption { display: block; }

  /* The review step's percentile table gets the same treatment, for the same reason. It is a plain
     <table> because it is also the PRINTED one, and on A4 a table is right — but on a phone the
     four columns pushed the document's scroll width to 449 px against a 390 px viewport, which is
     a page that scrolls sideways. Measured on the running app, not reasoned about. */
  .underlag .printtabell table,
  .underlag .printtabell thead,
  .underlag .printtabell tbody,
  .underlag .printtabell tr,
  .underlag .printtabell th,
  .underlag .printtabell td { display: block; }
  .underlag .printtabell thead { display: none; }
  .underlag .printtabell tr {
    border: 1px solid var(--line-2); border-radius: var(--radius);
    padding: .5rem .7rem; margin-bottom: .6rem; background: var(--surface);
  }
  .underlag .printtabell td {
    border: 0; display: flex; justify-content: space-between; gap: 1rem; text-align: left;
  }
  .underlag .printtabell td::before {
    content: attr(data-label); font-weight: 600; color: var(--ink-2);
  }
  .underlag .printtabell caption { display: block; }

  /* The chart keeps its viewBox and is scaled to the screen, so a 12 px label lands at 7 px on a
     phone. Type and strokes are sized in USER UNITS, so enlarging them here is what keeps the
     rendered size constant instead of shrinking with the picture. */
  .diagram .etikett { font-size: 19px; }
  .diagram .etikett--axel, .diagram .etikett--zon { font-size: 17px; }
  .diagram .kurva { stroke-width: 3; }
  .diagram .kurva--spann { stroke-width: 4; }
  .diagram .punkt { r: 5; }
}

/* ── the importer's raw preview ───────────────────────────────────────────── */
/*
   The ONE table in this app that may scroll sideways, and the exception is the reason: it is a
   picture of the user's file exactly as it is, not a table this app composed. Turning it into
   cards would destroy the only thing it is for — seeing that the header is on row 3 and that the
   median is in column 6. The mapped preview beside it IS the app's own table and uses
   .spanntabell, which becomes cards on a phone like every other table here.
*/
.ratabell__ruta { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--gap); }
.ratabell { border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ratabell th, .ratabell td {
  padding: .25rem .5rem; border: 1px solid var(--line-2); white-space: nowrap;
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis;
}
.ratabell th { color: var(--ink-2); font-weight: 600; background: var(--surface-2); }
/* The row the app believes is the header, marked rather than merely stated (spec.md §5.2 step 1). */
.ratabell .rad--rubrik td, .ratabell .rad--rubrik th { background: var(--accent-2); font-weight: 600; }

/* A checkbox is the one field whose label goes AFTER the control. */
.field--kryss { display: flex; align-items: baseline; gap: .5rem; }
.field--kryss label { font-weight: 400; margin: 0; }

/* A warning is a banner that says what to do, never a colour that says something went wrong. */
.banner--warn { border-color: var(--amber); }

/* ── the chart (spec.md §9) ───────────────────────────────────────────────── */
/*
   EVERY stroke and fill in the SVG is `currentColor`. What a curve looks like is decided here, by
   setting `color` on its group — which is what keeps hard-coded hex out of the export path: the
   PDF is the browser's own print output of this very element (spec.md §10), so the print block at
   the bottom of this file reaches the chart exactly as it reaches the table. The Lovable build
   serialised its SVG with hex colours for a rasteriser, and that is the problem this avoids.

   Amber is 3.53:1 on paper. A LINE may carry it; a LABEL may not — labels are --ink and --ink-2,
   never `currentColor`.
*/

.diagramruta { margin: var(--gap) 0 0; }
.diagramruta figcaption { margin-top: .4rem; }
.diagram { width: 100%; height: auto; display: block; }

.diagram .rutnat { color: var(--ink); stroke-opacity: .1; stroke-width: 1; }
/* The zones are a background, and they alternate rather than each carrying a meaning of its own:
   the NAME is what says which zone this is, drawn inside the band (spec.md §9). */
.diagram .zon--a { color: var(--surface-2); fill-opacity: .6; }
.diagram .zon--b { color: var(--accent-2); fill-opacity: .55; }

.diagram .kurva { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.diagram .kurva--intern   { color: var(--accent); }  /* --brand-petrol */
.diagram .kurva--extern-1 { color: var(--amber); }   /* --brand-amber  */
.diagram .kurva--extern-2 { color: var(--ok); }
.diagram .kurva--extern-3 { color: var(--warn); }
.diagram .kurva--extern-4 { color: var(--ink-2); }
/* The band itself: heavier, and in ink rather than in a colour, because it is the answer and not
   one of the inputs. */
.diagram .kurva--spann { color: var(--ink); stroke-width: 3; }
/* A schablon run is dashed AS WELL AS badged in the table — no information by colour alone. */
.diagram .linje--schablon { stroke-dasharray: 6 4; }
.diagram .punkt--schablon { fill-opacity: .45; }
.diagram .markor { color: var(--accent); }

.diagram .etikett { fill: var(--ink); font-size: 12px; }
.diagram .etikett--axel { fill: var(--ink-2); font-size: 11px; }
.diagram .etikett--zon { fill: var(--ink-2); font-size: 11px; }
/* The föreslagen lön's label sits ON the band by construction — the marker is at that amount, and
   the band passes through it. Printed, the line ran straight through the digits and read as a
   strikethrough on an amount somebody is about to offer. A halo in the page colour, painted behind
   the glyphs, fixes it without moving the label away from the point it labels. CSS only: the SVG
   still carries no colour of its own (spec.md §9). */
.diagram .etikett--markor {
  font-weight: 600;
  paint-order: stroke fill;
  stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}

/* ── the list ─────────────────────────────────────────────────────────────── */

.lista { list-style: none; padding: 0; margin: 0; }
.lista > li + li { margin-top: .6rem; }
/* A revoked analysis and a deleted one are TWO different labels and must never be conflated
   (app-data-guide.md §6.3). They get two sections and two banners. */
.lista--utan-behorighet { opacity: .85; }
.lista__etikett {
  display: inline-block; padding: .1rem .45rem; border-radius: var(--radius-sm);
  font-size: .8rem; background: var(--surface-2); border: 1px solid var(--line);
}

/* A register row (spec.md §12.2). Cards at every width rather than a table: on a phone a table
   of five salary figures scrolls sideways, which the UX guide forbids outright, and on a
   computer the card is wide enough to read as a row anyway. The status is a WORD in
   `.lista__etikett` — never a colour, because a printed register has none. */
.kortrubrik { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.kortrubrik h3 { margin: 0; }
.spannrad { margin: 0; font-variant-numeric: tabular-nums; }
.spannrad strong { font-size: 1.05rem; }

/* ── dialogs ──────────────────────────────────────────────────────────────── */

/* A native <dialog> with showModal(): focus trapping, Escape and a return to the opener, with no
   focus-management code and no dependency. It is capped in rem so the line length stays readable
   on a wide screen, and clamped to the viewport so it still fits a phone. */
dialog {
  max-width: min(46rem, calc(100vw - 2rem));
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(28, 25, 20, .45); }
dialog h2 { margin-top: 0; }

/* One row per person in the share dialog: the name, and the one action. "Skapade analysen" is a
   label this UI shows — never an authority it computes (app-integration-guide.md §8.6, rule 1). */
.delningsrad {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line-2);
}
.delningsrad > span { flex: 1 1 14rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* ── the underlag: the review on screen, and the same blocks on paper ─────── */
/*
   `ui/underlag.js` produces ONE block list and `ui/print.js` renders it. Step 6 shows it on
   screen; `#print-area` shows it on paper. Both use the classes below, which is what makes the
   review a review — what the user reads before pressing print is the document, not a summary of
   it (spec.md §13, app-ux-guide.md's rule about a step with a consequence).
*/
.kv { margin: 0; }
.kv > div {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem;
  padding: .3rem 0; border-bottom: 1px solid var(--line-2);
}
.kv dt { flex: 1 1 14rem; margin: 0; color: var(--ink-2); }
.kv dd { flex: 1 1 14rem; margin: 0; font-variant-numeric: tabular-nums; }

.underlag { margin-top: var(--gap); }
.underlag h2 { font-size: 1.05rem; margin-bottom: .2rem; }
.underlag h3 { font-size: .98rem; margin-bottom: .2rem; }

/* A caveat is a bordered box and a WORD, never a colour: a printer is often monochrome, and a
   warning that survives only in colour has not survived (spec.md §9's rule, applied to paper). */
.printvarning {
  margin: .4rem 0;
  padding: .4rem .6rem;
  border: 1px solid var(--amber); border-left-width: 3px;
  border-radius: var(--radius-sm);
}
.printtabell table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.printtabell th, .printtabell td {
  padding: .35rem .5rem; border-bottom: 1px solid var(--line-2); text-align: left;
}
.printtabell td.num, .printtabell th + th { text-align: right; }
.printtabell caption { caption-side: bottom; padding-top: .4rem; font-size: .9rem; color: var(--ink-2); }
.printfoot { margin-top: .6rem; font-size: .9rem; color: var(--ink-2); }

/* ── print: the PDF is the browser's own output (spec.md §10) ─────────────── */

@media print {
  @page { margin: 18mm 16mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .appbar, .savebar, .banner, .skip-link, button, .no-print { display: none !important; }
  #app { display: none; }
  #print-area { display: block !important; }
  /* Every flag, badge and warning renders IN PLACE and in full — never as a marker resolved in
     a legend. A colleague reading the PDF in 2029 has no legend. */
  .badge { border: 1px solid #000; color: #000; background: transparent; }
  .spanntabell th, .spanntabell td { border-bottom: 1px solid #999; }
  a[href]::after { content: ""; }

  #print-area h1 { font-size: 17pt; margin: 0 0 .4em; }
  /* A heading at the foot of a page with its section overleaf is a document that reads as two. */
  #print-area h2 { font-size: 12.5pt; margin: 1.1em 0 .3em; break-after: avoid; page-break-after: avoid; }
  #print-area h3 { font-size: 11pt; margin: .9em 0 .2em; break-after: avoid; page-break-after: avoid; }
  #print-area .kv > div { border-bottom: .4pt solid #999; padding: 2pt 0; }
  #print-area .kv dt { color: #000; }
  /* A caveat split across a page fold has been deleted, only slowly. */
  #print-area .printvarning {
    border: .8pt solid #000; border-left-width: 2.5pt;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* A source's heading and its stamps are one statement; a page fold through the middle of them
     leaves "Lönebegrepp: grundlön" on a page that does not say which source it belongs to. */
  #print-area .blockgrupp { break-inside: avoid; page-break-inside: avoid; }
  #print-area table { border-collapse: collapse; width: 100%; break-inside: avoid; page-break-inside: avoid; }
  #print-area th, #print-area td { border: .4pt solid #666; padding: 3pt 5pt; text-align: left; }
  #print-area td.num { text-align: right; }
  #print-area .printfoot {
    margin-top: 1.2em; border-top: .4pt solid #666; padding-top: .4em; font-size: 9pt; color: #000;
  }
  /* The chart is the browser's own render of the same SVG the screen shows — no rasteriser, no
     hard-coded hex anywhere in it (spec.md §9). Capped so it cannot push the sources onto a
     third page on its own. */
  #print-area .diagramruta { break-inside: avoid; page-break-inside: avoid; margin: .5em 0 1em; }
  #print-area .diagram { width: 100%; max-height: 95mm; }
}
#print-area { display: none; }