/* page-documents.css - the "documents" page group of the Furetank redesign (feature/furetank-portal, 2 Oct 2026):
   Documents (/documents), Your account (/account), Activity (/activity) and the privacy notice (/privacy).

   The shell links this file on /documents by the page's active key. /account and /activity have their own keys
   ('account', 'activity'), so they pass ['page' => 'documents'] to portal_header(); /privacy has no shell and links it
   itself. Every rule here is therefore scoped to a class only these pages print (.doc-sec, .tbl-docs, #doc-index,
   .acct-*, .act-*, .pn*), so it can never restyle another page.

   No new colour: every value is a token from portal.css / portal_brand_style(). No tinted grounds, no letter-spaced
   capitals, no red except what portal.css already reserves for lapsed / expired / overdue (R2, R3). */

/* ================================================================ Documents */
/* THE THREE KINDS ARE TOLD APART BY THEIR HEADING: the section names its kind with the same one-tone icon its rows carry
   (report / certificate / person), so the icon down the left of each row is a key the heading has already explained. */
.doc-sec h2 .ic-sec { width: 18px; height: 18px; align-self: center; color: var(--heading); }
.doc-sec .card-sub { max-width: 90ch; }

/* one anatomy for every file: the document, when it was shared, how long it stays, the one Download action. The three
   tables share their column widths (colgroup: auto / w-when / w-until / w-act), so the dates and the buttons line up
   down the whole page. */
.tbl-docs td.num { white-space: nowrap; }
.tbl-docs .doc-name .dn > span { overflow-wrap: anywhere; }
/* the owner of the files under it: a vessel or a seafarer, named and linked, with its kind icon */
.tbl-docs tr.group-head .gh { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; }
.tbl-docs tr.group-head .gh .ic { margin-right: 2px; }

/* THE SECTION INDEX ("Reports 1 · Vessel documents 4 · Seafarer documents 16"). The separators are drawn here, between
   the entries that are showing, because the search takes an emptied section out of the index; when the search empties
   every section the index goes too and #doc-count says why. */
#doc-index .si:not([hidden]) ~ .si:not([hidden])::before { content: "\00B7\0020\0020"; margin-left: 8px; white-space: pre-wrap; color: var(--ink-4); }
#doc-index:not(:has(.si:not([hidden]))) { display: none; }
#doc-index .si a { white-space: nowrap; }   /* an entry wraps whole, after its separator: "Seafarer documents" never leaves its number behind (390 px) */
#doc-index .si-n { margin-left: 2px; font-weight: 400; color: var(--ink-3); }

/* ================================================================ Your account */
/* who you are here, as facts: two columns in the card (the shell's auto-fit made a third, narrow one at 1440) */
.facts.acct-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acct-facts .acct-wide { grid-column: 1 / -1; }
.acct-facts dd { overflow-wrap: anywhere; }
/* the password fields keep a readable length on a wide screen instead of running the width of the column */
.acct-form { max-width: 30rem; }
/* the account's sentences are read, not scanned: body size, the secondary ink, a comfortable measure */
.acct-text { margin: 0 0 10px; max-width: 68ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.acct-text:last-child { margin-bottom: 0; }

/* ================================================================ Activity */
/* deliberate column widths (DESIGN_SPEC 3.13): When 11rem (col.w-when) · Who · What · Detail (the rest) · Address */
col.act-who { width: 16%; }
col.act-what { width: 20%; }
col.act-addr { width: 9rem; }
.act-tbl .act-detail, .act-tbl .act-ip { overflow-wrap: anywhere; }
.act-pager { margin: 0 0 12px; font-size: 13px; }
.act-pager a { font-weight: 600; }

/* ================================================================ the privacy notice (no shell, no sign-in) */
/* A document to be read: the tenant's mark above the heading, one white sheet on the canvas, a 72-character measure.
   The words are the owner's draft (ISSUE-467) and are not changed here. */
.pn-body { background: var(--bg); }
.pn { width: calc(100% - 32px); max-width: 760px; margin: 32px auto 48px; padding: 32px 40px 36px; background: var(--surface);
      border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 15px; line-height: 1.6; color: var(--ink); }
.pn .pn-mark { display: inline-block; margin: 0 0 18px; }
.pn .pn-mark img { display: block; width: auto; height: 80px; max-width: 100%; object-fit: contain; }   /* the sign-in card's 80 px: this page is opened from there */
.pn .pn-mark .logo-text { font-size: 20px; }
.pn h1 { font-size: 24px; line-height: 1.25; margin: 0 0 8px; }
.pn h2 { font-size: 17px; line-height: 1.35; margin: 26px 0 6px; }
.pn p, .pn li { max-width: 72ch; }
.pn > p.muted { font-size: 14.5px; }
.pn ul { margin: 0 0 .8em; padding-left: 22px; }
.pn li { margin: 4px 0; }

/* ================================================================ widths */
/* The laptop and the tablet band: the two date columns give the document's name more room (at 768 the full 11 / 12rem
   left it about 180 px, four lines for a certificate's name). 9.5rem still holds "19 Oct 2026, 22:17" on one line, and the
   three tables keep one set of widths, so they still line up. */
@media (max-width: 1279px) {
  .tbl-docs col.w-when, .tbl-docs col.w-until { width: 9.5rem; }
}
/* Below 1024 the account's two columns become one by the shell's own .grid-halves rule. */
@media (max-width: 640px) {
  /* a phone: the file's Download button stands under its dates, at its full 44 px */
  .tbl-docs td.num { padding-top: 6px; }
  .facts.acct-facts { grid-template-columns: minmax(0, 1fr); }
  .acct-form { max-width: none; }
  .pn { width: calc(100% - 24px); margin: 12px auto 32px; padding: 20px 18px 24px; font-size: 14.5px; }
  .pn .pn-mark { margin-bottom: 14px; }
  .pn .pn-mark img { height: 64px; }
  .pn h1 { font-size: 21px; }
  .pn h2 { font-size: 16px; margin-top: 22px; }
}
/* THE SECTION INDEX IS THREE CONTROLS, NOT A SENTENCE (responsive review, 2 Oct). On a phone it wraps to two lines, and its
   16 px links sat 3.5 px apart ("Reports" over "Seafarer documents"): under WCAG 2.5.8 and under the owner's 40-44 px floor.
   A phone or a finger (the shell's pointer: coarse rule) gives each entry a 44 px box; inline-block keeps the line exactly as
   it was - the same words, numbers, separators and wrap, only taller. The margins take back the box's own padding so the
   words keep their distance from the search above and the first list below (the box stays 6 px clear of the search). */
@media (max-width: 640px), (pointer: coarse) {
  #doc-index { margin: -8px 0 2px; }
  #doc-index .si a { display: inline-block; padding: 12px 0; line-height: 20px; }
}
/* A PHONE'S INDEX WRAPS, and the line broke after a separator ("Vessel documents 4 ·" at 320-390, the dot left at the line's
   end). There the separators give way to a gap, so no line can end - or start - on one; the search still takes an emptied
   section out (a [hidden] entry is not a flex item, so it leaves no gap behind). The .si boxes are not given a display
   here: that would outrank [hidden]. */
@media (max-width: 640px) {
  #doc-index { display: flex; flex-wrap: wrap; column-gap: 14px; }   /* the gap Rotations' index uses */
  #doc-index .si:not([hidden]) ~ .si:not([hidden])::before { content: none; }
}

@media print {
  .pn { border: 0; padding: 0; margin: 0; width: auto; max-width: none; }
  #doc-index { display: none; }
}