/* Portal stylesheet, written against docs/BRAND.md sections 7 to 9.
   One column, one width (62 rem), light only, no shadows, no motion,
   radius 4 px, system fonts only: no web font may ever be added here
   (BRAND.md section 8). Colors are the section 7.1 palette; the outcome
   classes are the section 7.2 signal colors and are never decoration. */

:root {
  --paper: #FBFAF7;
  --paper-2: #F3F0EA;
  --ink: #16191D;
  --ink-2: #4A5159;
  --line: #DDD7CC;
  --accent: #1D4D5C;
  --accent-2: #123844;
  --done: #2E5E3E;
  --refused: #8A2B2B;
  --waiting: #6D4A1F;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* The column fills the viewport so the footer sits at the bottom of a short
   page instead of floating under the last paragraph. dvh after vh: older
   engines keep the vh rule, newer ones take the dynamic one and stop the
   footer from hiding behind a mobile browser's own bar. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.wrap {
  /* 62 rem is the column (BRAND.md section 9), and 100% is the promise
     that the column never grows past its parent. Both are needed: the
     cap alone let a wide table stretch main to 753 px inside a 320 px
     phone, because a percentage max-width loses to a rem one written on
     the same class (K1). */
  max-width: min(62rem, 100%);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Sentences never run the full column (BRAND.md section 9). */
p, li { max-width: 66ch; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.25;
}

/* The deployed test environment's banner (E1). The warning color from
   BRAND.md section 7.2 as a full width band above the brand: it has to be
   the first thing read on the page and it may never be mistaken for part
   of the product. No motion, no icon, one sentence. */
.testbanner {
  flex: none;
  background: var(--waiting);
  color: var(--paper);
}

.testbanner p {
  margin: 0;
  max-width: none;
  padding: 0.5rem 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

header { border-bottom: 1px solid var(--line); flex: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The wordmark and the log out button do not fit one line on a 320 px
     phone, and without this the button sat on top of the company's own
     name (K1). Wrapping puts it on a line of its own instead. */
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Same wordmark and same mark as the public site (site/public/styles.css),
   so a customer arriving from integritetsombudet.se meets one company and
   not two. The mark is the "Stallforetradaren" of BRAND.md section 6: a
   filled dot behind an open arc, never an eye and never a seal. */
.brand { margin: 0; }
.brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  color: var(--accent);
}
.brand-name {
  font-family: var(--serif);
  font-size: 1.12rem;
  letter-spacing: 0.01em;
}

main { flex: 1 0 auto; padding-top: 1.5rem; padding-bottom: 3rem; }

/* The column may never be widened by its own content (K1).

   body is a flex column, and a flex item is not allowed to shrink below
   the widest thing inside it: one table with a long unbroken cell was
   enough to make main 753 px wide inside a 320 px phone, and every
   heading and paragraph in the page then inherited that width. The scroll
   box under the table could not help, because the box itself was being
   stretched rather than overflowed. This line plus the .wrap cap above
   are what make the scroll box actually scroll. */
body > * { min-width: 0; }

footer {
  flex: none;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.9rem;
}
footer .wrap { padding-top: 1rem; padding-bottom: 1rem; }

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-2); }

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

button {
  font: inherit;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.35rem 1rem;
  cursor: pointer;
}
button:hover, button:focus { background: var(--accent-2); }

label { display: block; margin-top: 0.75rem; }

input {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  margin: 0.25rem 0 0.75rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

th {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink-2);
  font-size: 0.9rem;
}

.dampad { color: var(--ink-2); }
.skyltfonster { color: var(--ink-2); font-size: 0.9rem; }

/* Outcome signal colors (BRAND.md section 7.2). The word always stands
   next to the color: color is never the sole carrier of the outcome. */
.utfall-klart { color: var(--done); }
.utfall-avslag { color: var(--refused); }
.utfall-vantar { color: var(--waiting); }
.utfall-neutral { color: var(--ink-2); }

.undermeny {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.5rem;
  display: flex;
  /* Wraps to a second line rather than pushing the page wider. Four items
     and a 1.5 rem gap do not fit a 320 px phone, and a flex row does not
     wrap unless it is told to: this single word was 52 of the 372 px the
     to do page spilled by (K1, measured session #98). */
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.75rem;
}

/* The notice forms on the to do page (P3): two plain buttons per open
   moment, stacked, and the secondary word (not yet) toned down so the
   affirmative stays the obvious one. */
.besked-form { display: flex; flex-direction: column; gap: 0.4rem; }
.besked-form button { white-space: nowrap; }
.besked-form button[value="ej utfört"] {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
}
.besked-form button[value="ej utfört"]:hover,
.besked-form button[value="ej utfört"]:focus {
  color: var(--paper);
  background: var(--accent-2);
}
.besked-tack {
  border: 1px solid var(--done);
  border-radius: 4px;
  color: var(--done);
  padding: 0.5rem 0.75rem;
}

/* The power of attorney wording on the invitation page (P2): the exact
   bytes the signing message hashes, so it renders as written, wrapped. */
.fullmaktstext {
  white-space: pre-wrap;
  font-family: inherit;
  border: 1px solid var(--line);
  padding: 1rem 1.25rem;
  background: var(--bg-2, #fafafa);
}

/* One guidance moment (P7). A card and not a table row: the instruction is
   several sentences and a numbered list, and a table that has to carry
   those becomes unreadable on a phone, which is where a customer standing
   with their BankID actually is. */
.moment {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.moment h2 { margin-top: 0; }
.moment-lage { color: var(--ink-2); font-size: 0.95rem; }
.moment-behovs { background: var(--paper-2); padding: 0.6rem 0.9rem;
                 border-radius: 4px; }
.moment-steg li, .moment-fallgropar li { margin-bottom: 0.5rem; }
.moment-varning { margin-bottom: 0.25rem; }
.moment-kalla { color: var(--ink-2); font-size: 0.9rem; }
.moment-klart { color: var(--done); }

/* The bench's assessment forms (H4b). The reply is pasted whole, so the
   box has to be big enough to read in, and a proposal is set apart from
   the page so it never reads as a decision already taken. */
.svarstext { width: 100%; max-width: 66ch; font: inherit; padding: 0.5rem;
             border: 1px solid var(--line); border-radius: 4px; }
.forslag { border-left: 3px solid var(--accent); padding-left: 1rem;
           margin: 1rem 0; }
/* The letter as it will leave (H6c). pre and not a paragraph, because a
   letter's line breaks are part of it, and pre-wrap rather than pre so a
   long line folds instead of pushing the page sideways on a phone (the
   whole lesson of K1). */
.forhandsvisning { white-space: pre-wrap; font: inherit;
                   background: var(--paper-2); padding: 0.75rem 1rem;
                   border-radius: 4px; max-width: 66ch; }
.forslag h3 { margin-bottom: 0.25rem; }
.fel { border: 1px solid var(--refused); border-radius: 4px;
       color: var(--refused); padding: 0.5rem 0.75rem; }
select { font: inherit; padding: 0.35rem; border: 1px solid var(--line);
         border-radius: 4px; margin: 0.25rem 0 0.75rem; }

/* ---------------------------------------------------------------------
   Tables and forms on a phone (K1, session #98)

   Measured before the fix, in a real browser at 320 and 390 px: the
   customer's status page pushed the document to 670 px, the watch page to
   475, the orderer's invitations to 470 and the caseworker's day view to
   769. The stylesheet had no media query at all, so every one of those
   pages could only be read by dragging it sideways.

   Two answers, and which one a table gets is a judgement about who reads
   it:

   - .tabellrull is the safety net under every table. It scrolls sideways
     inside its own box instead of widening the page, so a table can never
     again drag the whole document with it. No tabindex is set on it: the
     portal runs no JavaScript, so nothing here can tell whether a given
     box actually overflows, and a focus stop on a box with nothing to
     scroll is worse than none. Current browsers make an overflowing
     scroll container keyboard reachable by themselves.
   - .stapla is the customer's answer. Under the breakpoint the rows become
     blocks and every value gets its column heading in front of it, so the
     page is read downwards like everything else on a phone. It costs the
     table semantics for assistive technology on narrow screens, which is
     the known trade of this pattern, and it is taken only where the
     alternative is a customer dragging their own case sideways. The dense
     caseworker tables keep the scroll box and their semantics.

     One caseworker table takes .stapla anyway, and the exception is written
     out here rather than left to be rediscovered: the task queue (H6a). Its
     last cell is not a value but the close form, which is the whole point
     of the page, and on a 390 px phone that cell sat outside the scroll box
     with the button off screen (measured session #100). A table whose
     action has to be dragged into view is not a table anyone acts from.

   The breakpoint is 40 rem, which lands between the widest phone and the
   narrowest tablet. The three widths that prove it are 320, 390 and 1280,
   the same three the public site uses (SAJT.md §8). */

.tabellrull { overflow-x: auto; }

@media (max-width: 40rem) {
  /* The column heading moves into each cell, so the header row would be a
     second copy of it. */
  .stapla thead { display: none; }

  .stapla, .stapla tbody, .stapla tr, .stapla td { display: block; }

  .stapla tr {
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 0;
  }

  .stapla td {
    border: 0;
    padding: 0.1rem 0;
  }

  /* The heading in front of the value. An empty cell keeps its label: a
     missing date is a fact about the case, not a gap in the page. */
  .stapla td::before {
    content: attr(data-etikett) ": ";
    color: var(--ink-2);
    font-size: 0.9rem;
  }

  /* The first cell of a row carries the counterparty and reads as the
     row's own heading. */
  .stapla td:first-child { font-weight: 600; }
  .stapla td:first-child::before { font-weight: 400; }

  /* A button's words wrap rather than widen the page. "Ångra: momentet är
     inte utfört" does not fit 320 px on one line and never will. */
  .besked-form button { white-space: normal; }

  /* An input is as wide as the column and no wider. */
  input { max-width: 100%; }

  /* A little of the side padding back, so the column is not mostly margin
     on the narrowest phone. */
  .wrap { padding: 0 1rem; }
}