/* ──────────────────────────────────────────────────────────────
   Pollock app chrome.

   Loaded after pollock.css, never instead of it. pollock.css is the system
   (type, colour, the section and row primitives); this file adds only what
   the authenticated shell needs on top: the app nav, the quota and account
   controls, the quick-search dropdown, the page header and the thin footer.

   It stays separate so the public pages, which are the SEO surface and want
   the smallest payload we can give them, never download the app's chrome.

   Same rules as the system: square edges, ink/paper/gold, Archivo for UI and
   DM Mono for anything that is a number or an identifier.
   ────────────────────────────────────────────────────────────── */

/* ── token bridge ──────────────────────────────────────────
   Every app page still carries a large inline <style> block written against
   the old main.css names. Mapping the old names onto the new ramp means those
   pages pick up the new palette the moment they switch shells, instead of
   rendering in two colour schemes until each one is rewritten. Delete this
   block when the last inline style block is gone. */
:root{
  --bg-deep:var(--paper); --bg-page:var(--paper); --bg-elevated:var(--card);
  --bg-card:var(--card); --bg-card-alt:var(--paper-2); --bg-hover:var(--paper-2);
  --bg-input:var(--card);
  --text-primary:var(--ink); --text-secondary:var(--ink-2);
  --text-muted:var(--ink-3); --text-placeholder:var(--ink-4);
  --accent-gold:var(--gold); --accent-gold-light:var(--gold-lift);
  --accent-gold-dim:var(--gold-wash); --accent-gold-hover:var(--gold-lift);
  --accent-green:var(--sage); --accent-red:var(--clay);
  --border-subtle:var(--line); --border-medium:var(--line-2);
  --border-gold:var(--gold); --border-focus:var(--gold);
  --font-body:var(--ui); --font-display:var(--ui);
  --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-xl:0;

  /* The rest of the legacy names, added 2026-09-03. Two different problems:

     Names that main.css defined and that died when the shell stopped loading
     it. --accent-cyan alone is referenced by twelve pages, so until those pages
     are rewritten their buttons had no background at all: an unresolved var()
     with no fallback is invalid at computed-value time, which drops the
     declaration rather than ignoring it. Cyan was the second action colour, so
     it lands on gold; orange marked people in the graphs, so it lands on clay. */
  --accent-cyan:var(--gold); --accent-cyan-dim:var(--gold-wash);
  --accent-cyan-hover:var(--gold-lift);
  --accent-orange:var(--clay);
  --accent-green-dim:rgba(63,107,79,.10); --accent-red-dim:rgba(156,63,40,.10);
  --transition-fast:.15s ease; --transition-medium:.25s ease;

  /* Flat system, so the old elevation ramp collapses to near nothing. Kept as a
     hairline rather than none: a few layouts lean on it to separate a card from
     the paper, and those read as broken with no edge at all. */
  --shadow-sm:0 1px 2px rgba(20,16,11,.05);
  --shadow-lg:0 2px 10px rgba(20,16,11,.07);
  --shadow-card:0 1px 2px rgba(20,16,11,.05);

  /* Names no stylesheet ever defined, here or in main.css. These pages have
     been rendering with dropped declarations since long before the redesign,
     which is why several of them had invisible borders in production too.
     Mapped rather than deleted, because deleting means editing every page. */
  --bg-primary:var(--paper); --bg-secondary:var(--card);
  --bg-tertiary:var(--paper-2); --bg-darker:var(--band);
  --border-color:var(--line); --border-hover:var(--line-2); --border:var(--line);
  --text:var(--ink); --text-error:var(--clay);
  --accent:var(--gold); --accent-primary:var(--gold); --primary-color:var(--gold);
  --accent-yellow:var(--gold-lift); --accent-gold-glow:var(--gold-wash);

  /* Custom graph edges. Deliberately neutral: the palette has no purple and
     inventing one for a legacy name would widen the system by accident. The
     real graph colours get decided when company, person and nexus are done. */
  --accent-purple:var(--ink-3);
}

/* ── utilities ─────────────────────────────────────────────
   .hidden and .invisible were declared once in main.css and were lost the
   moment the app stopped loading it. Nothing looked broken, because the
   failure is silent in the other direction: 88 classList.add('hidden') calls
   and 32 markup usages across nine pages simply stopped hiding anything, so
   the company page kept its loading spinner on screen underneath the loaded
   record, and #company-content was visible before its data arrived.

   !important is deliberate and was in the original: every page carries an
   inline <style> block that loads after this file, so a plain .hidden loses
   to any same-specificity display rule declared there, which is exactly what
   .loading-state{display:flex} was doing. */
.hidden{display:none!important}
.invisible{visibility:hidden}

/* ── nav ───────────────────────────────────────────────────
   Same bar as the public pages, different cargo. The wordmark, the search box
   and the hairline underneath all come from pollock.css; what follows is only
   the controls a signed-in reader has that a visitor does not. */

/* The public search pulses once on load to say "this is the control". On a
   tool opened twenty times a day that reads as a tic, so it is dropped here. */
.nav .find-box{animation:none}
/* The public nav is capped at 1180px because it sits over a 1180px article
   column. The app's column is 1330px, so at 1180 the header read as inset from
   its own page. Same cap as .app-main, so header and content share an edge.

   The band and the condensed bar need the same treatment for the same reason.
   Both are the public page's, where 1180 is right because the article under
   them is 1180 too; here the content below them is 1330, so the company name,
   the identifiers and the KPI row all sat 75px inside the edge of the panels
   they head. Four elements, one edge. */
body.app .nav-in,
body.app .band > .wrap,
body.app .mastbar-in{max-width:1330px}

.aplinks{display:flex;align-items:center;gap:4px;flex:0 0 auto}
/* Square, quiet, and marked by a rule rather than a filled pill: the nav is
   not where the page's colour should be spent. */
.aplink{position:relative;display:flex;align-items:center;gap:7px;padding:7px 11px;
  font-size:13px;color:var(--ink-2);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.aplink svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 auto}
.aplink:hover{color:var(--ink)}
.aplink.on{color:var(--ink);font-weight:600;border-bottom-color:var(--gold)}
.aplink.on svg{stroke:var(--gold)}

/* Unread watchlist changes. Gold rather than red: it is a count of things to
   look at, not a warning. */
.nav-badge{display:inline-block;min-width:16px;padding:1px 4px;background:var(--gold);
  color:#fff;font-family:var(--mono);font-size:9.5px;line-height:1.45;text-align:center;
  font-variant-numeric:tabular-nums}
.nav-badge.hidden{display:none}

.nav-r{gap:9px}
/* Square icon buttons, sized to match the search box so the row has one height. */
.navbtn{display:grid;place-items:center;height:30px;min-width:30px;padding:0 7px;
  background:none;border:1px solid transparent;cursor:pointer;color:var(--ink-3);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  transition:color .15s,border-color .15s,background .15s}
.navbtn:hover{color:var(--ink);border-color:var(--line-2);background:var(--paper-2)}
.navbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}

/* ── buttons ───────────────────────────────────────────────
   One set, because there were four. /app/registrations, /app/addresses and
   /app/clusters each carried a copy of the same block, and admin, research,
   researches and sync carried three more that disagreed on padding, radius
   and colour. The copies also hovered .btn-primary to --accent-green, so a
   gold button turned green under the cursor.

   Ink is the action and gold is the accent, the same rule the public company
   page follows, so the filled button is gold and everything quieter is a
   bordered box on paper. Square, like the rest of the system. */
.btn-primary,.btn-secondary,.btn-small,.btn-page,.btn-danger,.btn-success{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--ui);font-weight:600;font-size:14px;line-height:1;
  border-radius:0;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease}

.btn-primary{padding:10px 20px;background:var(--gold);border:1px solid var(--gold);
  color:#fff}
.btn-primary:hover{background:var(--gold-lift);border-color:var(--gold-lift)}

.btn-secondary,.btn-page{padding:10px 20px;background:var(--card);
  border:1px solid var(--line);color:var(--ink-2)}
.btn-secondary:hover:not(:disabled),.btn-page:hover:not(:disabled){
  background:var(--paper-2);border-color:var(--line-2);color:var(--ink)}

.btn-small{padding:8px 14px;font-size:13px;font-weight:500;background:var(--card);
  border:1px solid var(--line);color:var(--ink-2)}
.btn-small:hover:not(:disabled){background:var(--paper-2);border-color:var(--line-2);
  color:var(--ink)}

.btn-danger{padding:10px 20px;background:var(--clay);border:1px solid var(--clay);color:#fff}
.btn-danger:hover{background:#b04a30;border-color:#b04a30}
.btn-success{padding:10px 20px;background:var(--sage);border:1px solid var(--sage);color:#fff}
.btn-success:hover{background:#4a7d5c;border-color:#4a7d5c}

.btn-primary:disabled,.btn-secondary:disabled,.btn-small:disabled,
.btn-page:disabled,.btn-danger:disabled,.btn-success:disabled{
  opacity:.5;cursor:not-allowed}

/* ── the overflow menu ─────────────────────────────────────
   Same surface as the search suggestions, so the two dropdowns in the header
   are visibly the same object. */
.navmenu-wrap{position:relative}
.navmenu{position:absolute;top:calc(100% + 6px);right:0;min-width:216px;
  background:var(--card);border:1px solid var(--line-2);
  box-shadow:0 16px 40px rgba(20,16,11,.16);display:none;z-index:60}
.navmenu.open{display:block}
.navmenu-k{font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-4);padding:10px 13px 8px;border-bottom:1px solid var(--hair)}
.navmenu a{display:flex;align-items:center;gap:10px;padding:9px 13px;font-size:13px;
  color:var(--ink-2);border-bottom:1px solid var(--hair);transition:background .14s,color .14s}
.navmenu a:last-child{border-bottom:0}
.navmenu a:hover{background:var(--gold-wash);color:var(--ink)}
.navmenu a.on{color:var(--ink);font-weight:600}
.navmenu a.on svg{stroke:var(--gold)}
.navmenu svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 auto}
.navmenu-div{height:1px;background:var(--line);margin:0}

/* ── quota and account ─────────────────────────────────────
   One object in two forms: a mono label naming the thing, the value beneath
   it, both the same height. They sit side by side at the end of the header, so
   at two different heights they read as two unrelated controls. The quota also
   used to carry an eye, the watchlist's own icon, over a bare "1/999" that
   named nothing.

   The quota's colour is the only status signal up here, which is why it gets
   one of the three semantic colours when nothing else in the nav does. */
.chip{display:flex;flex-direction:column;justify-content:center;gap:1px;
  height:34px;padding:0 10px;border:1px solid var(--line-2);
  color:var(--ink-2);white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s}
.chip-k{font-family:var(--mono);font-size:8px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-4);line-height:1}
.chip-v{font-family:var(--mono);font-size:11.5px;line-height:1.15;
  font-variant-numeric:tabular-nums;max-width:14ch;
  overflow:hidden;text-overflow:ellipsis}
a.chip:hover,a.chip.on{border-color:var(--gold);background:var(--gold-wash)}
a.chip:hover .chip-v,a.chip.on .chip-v{color:var(--gold)}

/* Set by updateQuota() in _app_shell_scripts.html. */
.quota-green .chip-v{color:var(--ink)}
.quota-amber{border-color:var(--gold)}
.quota-amber .chip-k,.quota-amber .chip-v{color:var(--gold)}
.quota-red{border-color:var(--clay)}
.quota-red .chip-k,.quota-red .chip-v{color:var(--clay)}

/* Where the header tightens, the labels go and the values stay. */
@media(max-width:1080px){ .chip-k{display:none} .chip{padding:0 8px} }
@media(max-width:960px){ .aplink span{display:none} .aplink{padding:7px 9px} }
/* The search takes its own row and the labels go, but the two primary links
   stay as icons: they are the most-used destinations, and the overflow menu
   does not carry them. */
@media(max-width:760px){
  .nav-in{flex-wrap:wrap;row-gap:9px;gap:10px}
  .find{order:3;flex:1 1 100%;max-width:none}
  #quota-indicator{display:none}
}
@media(max-width:430px){
  .mark{font-size:24px}
  .aplink{padding:7px 6px}
  .navbtn{padding:0 5px}
}

/* ── quick search results ──────────────────────────────────
   main.js renders this markup by hand; the class names below are its, not
   ours, so they are matched rather than renamed. Same surface as .find-menu. */
.quick-search-results{position:absolute;top:calc(100% + 5px);left:0;right:0;
  background:var(--card);border:1px solid var(--line-2);
  box-shadow:0 16px 40px rgba(20,16,11,.16);display:none;z-index:60;
  max-height:min(70vh,460px);overflow-y:auto}
/* The group headings were 9px of pale grey on near-white, so the two kinds of
   result ran together as one list. Given the paper tint, darker ink, a real
   rule and the gold tick the section headings use elsewhere. */
/* The tick is a flex item, not an absolutely positioned one. Positioned
   absolutely it sat on top of the first letter and read as a hyphen glued to
   the word; in flow with a gap the layout cannot put them on top of each
   other, whatever the font metrics do. */
.search-section-title{display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  padding:9px 12px 8px;background:var(--paper-2);
  border-bottom:1px solid var(--line-2)}
.search-section-title::before{content:"";flex:0 0 auto;
  width:11px;height:1px;background:var(--gold-lift)}
.search-section-title:not(:first-child){border-top:1px solid var(--line-2)}
.search-result-item{display:block;padding:9px 12px;border-bottom:1px solid var(--hair);
  transition:background .14s}
.search-result-item:hover{background:var(--gold-wash)}
.search-result-name{font-size:13px;font-weight:500;letter-spacing:-.005em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result-meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:3px}
.search-no-results,.search-error{padding:14px;font-size:12.5px;color:var(--ink-3);text-align:center}
.search-error{color:var(--clay)}

/* ── company masthead ──────────────────────────────────────
   The band from the public company page, reused on the app page. Everything
   here is the difference between the two: a signed-in reader gets actions and
   a freshness stamp that the public page has no use for, and the status is
   written by the script into a legacy class rather than rendered by Jinja. */

/* The script sets className wholesale to 'company-status active|inactive', so
   the colour lives on those classes and the pip follows via :has(), rather
   than the script having to know about the pip at all. */
.band .company-status{color:#8fd0a4;font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;background:none;padding:0;border:0}
.band .company-status.inactive{color:var(--band-mid)}
.brow:has(.company-status.inactive) .pip{background:var(--band-mid)}

/* The public page prints the δ.τ. label as a span inside .co-dt; here the
   element's whole text content is written by the script, so the label is drawn
   rather than inserted. */
.co-dt::before{content:"δ.τ.";font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--band-mid);
  margin-right:9px;vertical-align:.08em}

/* The actions sit under the figures behind the band's own hairline, the same
   one the idbar and the KPI grid are separated by. It used to be drawn in
   --border-subtle from company.html's inline block, which is a paper tone, so
   the masthead carried one near-white line across it. */
.bandacts{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-top:18px;padding:18px 0 22px;
  border-top:1px solid var(--band-line)}
.bandacts .company-actions{display:flex;gap:10px}
/* The band's actions, written to beat company.html's own .action-btn.secondary
   rather than to tie with it. Both were (0,2,0) and the page's stylesheet
   loads second, so .secondary won and painted --bg-elevated on --border-subtle:
   a white box with a paper-toned edge, on the dark band. The same fault as the
   near-white rule that used to run above these buttons.

   Quiet by construction. They sit under four figures at 27px, and a pair of
   filled blocks was the heaviest thing in the masthead while being the least
   important: the record is what the reader came for, and these are what they
   do next. So: the band's own hairline, its own text colour, and a ground that
   lifts a little under the cursor. */
.band .action-btn,
.band .action-btn.secondary{display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;font-family:var(--ui);font-size:13px;font-weight:600;
  border-radius:0;cursor:pointer;background:transparent;color:var(--band-txt);
  border:1px solid var(--band-line);
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.band .action-btn:hover,
.band .action-btn.secondary:hover{background:rgba(251,250,247,.07);
  border-color:var(--band-mid);color:var(--band-txt)}
/* The icon is the quieter half until the button is pointed at. */
.band .action-btn svg{width:15px;height:15px;stroke:var(--band-mid);
  transition:stroke .15s ease}
.band .action-btn:hover svg{stroke:var(--band-txt)}

/* Watching is a state, so it is shown as one: the accent on the edge and the
   label, not a filled gold block competing with the figures above it. */
.band .action-btn.watching,
.band .action-btn.secondary.watching{background:var(--gold-wash);
  border-color:var(--gold-lift);color:var(--gold-lift)}
.band .action-btn.watching svg{stroke:var(--gold-lift)}
.band .data-freshness{display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--band-mid)}

@media(max-width:640px){
  .bandacts{padding-bottom:18px}
  .bandacts .company-actions{width:100%}
  .band .action-btn{flex:1;justify-content:center}
}

/* ── company section bar ───────────────────────────────────
   Docked to the bottom of the viewport, where it was, and each section is its
   own box, as it was. What changed is only what was off-system or costly:

   - no backdrop-filter. It sat on a full-width fixed element, so the
     compositor re-blurred everything behind it on every scroll frame, which
     is what made fast scrolling feel heavy. Opaque paper costs nothing.
   - the active box is the band's ink rather than #2c3e50, a slate the palette
     does not contain, and it no longer grows two pixels and changes font size
     when selected, which nudged every other box along the row.
   - square, like every other box in the system.
   - counts set in mono, because a count is an identifier. */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:998;
  background:var(--paper);border-top:1px solid var(--line);
  padding:10px 24px calc(12px + env(safe-area-inset-bottom,0px))}
.cbar-in{max-width:1330px;margin:0 auto;display:flex;justify-content:center}

.company-tabs{display:flex;justify-content:center;gap:4px;max-width:100%;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.company-tabs::-webkit-scrollbar{display:none}

.company-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;border:1px solid var(--line);background:var(--card);
  color:var(--ink-2);cursor:pointer;white-space:nowrap;border-radius:0;
  font-family:var(--ui);font-size:14px;font-weight:500;letter-spacing:-.01em;
  transition:background .13s ease,border-color .13s ease,color .13s ease}
.company-tab:hover{background:var(--paper-2);border-color:var(--line-2);color:var(--ink)}
.company-tab.active{background:var(--band);border-color:var(--band);
  color:var(--band-txt);font-weight:600}

.company-tab .tab-count{font-family:var(--mono);font-size:10.5px;
  color:var(--ink-4);font-variant-numeric:tabular-nums}
.company-tab.active .tab-count{color:var(--band-mid)}

.tab-content{display:none}
.tab-content.active{display:block}

/* The last section must not sit under the bar. */
body.app .app-main:has(.cbar){padding-bottom:calc(64px + clamp(28px,4vw,48px))}

@media(max-width:900px){
  .cbar{padding:8px 4px calc(10px + env(safe-area-inset-bottom,0px))}
  .cbar-in{position:relative;justify-content:flex-start}
  .company-tabs{justify-content:flex-start;width:100%;padding:0 30px}
  /* The row scrolls sideways here. A faded edge alone read as the end of the
     row, and a first-time reader on a phone took four tabs for all of them.
     Each end now carries a chevron over the fade, and the page's script drops
     the one there is nothing more behind (.at-start / .at-end). */
  .cbar-in::before,.cbar-in::after{position:absolute;top:0;bottom:0;width:46px;z-index:2;
    pointer-events:none;display:flex;align-items:center;font-family:var(--ui);
    font-size:24px;line-height:1;color:var(--ink-3);transition:opacity .15s ease}
  .cbar-in::before{content:"\2039";left:0;justify-content:flex-start;padding-left:6px;
    background:linear-gradient(to right,var(--paper) 40%,rgba(251,250,247,0))}
  .cbar-in::after{content:"\203A";right:0;justify-content:flex-end;padding-right:6px;
    background:linear-gradient(to left,var(--paper) 40%,rgba(251,250,247,0))}
  .cbar-in.at-start::before,.cbar-in.at-end::after{opacity:0}
  .company-tab{padding:8px 14px;font-size:13px}
}
@media(max-width:640px){
  .company-tabs{gap:3px;padding:0 26px}
  .company-tab{padding:7px 11px;font-size:11.5px}
  .company-tab .tab-count{display:none}
}

/* The band's measures sit between the identifier bar and the action row. The
   .kpis / .kpi rules are pollock.css's, unchanged; all this adds is the space
   between the strip and the buttons under it, since the strip draws its own
   top rule and the action row draws another. */
.band .kpis + .company-actions-row{margin-top:6px}
@media(max-width:640px){ .band .kpis + .company-actions-row{margin-top:0} }

/* One link out per card, to the section it previews. */
.card-more{border:0;background:none;cursor:pointer;font-family:var(--ui);
  font-size:12px;font-weight:500;color:var(--ink-3);padding:0;
  transition:color .13s ease}
.card-more:hover{color:var(--gold)}

/* ── overview sections ─────────────────────────────────────
   The overview is built from the public company page's section system, so
   almost nothing is needed here: .blk, .blk-hd, .grid2 and .rows all come
   from pollock.css unchanged. What follows is only what the app page adds.

   A register cell is a cell that can be clicked into its section. The value
   sits where a cell's value sits, so a register with entries and a contact
   field look like the same kind of object, which is the point: both are
   things the record states. */
.g-cell.reg{display:block;width:100%;text-align:left;border:0;font:inherit;
  cursor:pointer;transition:background .13s ease}
.g-cell.reg:hover:not(:disabled){background:var(--paper-2)}
.g-cell.reg:disabled{cursor:default}
.reg-n{font-family:var(--mono);font-size:13px;color:var(--ink)}
.reg-zero,.reg-wait{font-size:12px;color:var(--ink-4)}
.reg-wait{font-style:italic}

/* The chamber pair is a plain wrapper so its two cells sit in the grid
   alongside the rest rather than as a block of their own. */
#chamber-card{display:contents}
#chamber-card[hidden]{display:none}

/* Row extras the public page does not need: a secondary line under a name,
   a monospaced code in the leading column, and an empty state. */
.r-sub{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.r-code{font-family:var(--mono);font-size:11.5px;color:var(--gold);
  flex:0 0 auto;letter-spacing:.03em}
.r-none{font-size:13px;color:var(--ink-4)}
.blk-c .card-more{font-size:11.5px}

/* ── register ledger ───────────────────────────────────────
   Four counts in one .grid2 made 209 routine ΓΕΜΗ modifications read as the
   same kind of fact as 3 insolvency publications. Registers are now two
   groups, and each row is a line of a ledger: what the register holds, when,
   and how many. Geometry is .rows / .row from pollock.css, so a register row
   and a management row are visibly the same object; only the leading mark and
   the button reset are new.

   The mark is presence, never judgement. Gold where the register holds
   something, a hairline where it holds nothing. No tick and no warning
   triangle: "clean" and "risky" are the reader's call, not the page's. */
.regs{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line-2)}
.reg-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:12px 15px;background:var(--card);border:0;
  border-top:1px solid var(--line-2);font:inherit;color:inherit;cursor:pointer;
  transition:background .14s}
.reg-row:first-child{border-top:0}
.reg-row:hover:not(:disabled){background:var(--gold-wash)}
.reg-row:disabled{cursor:default}
.reg-mk{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.reg-mk.none,.reg-mk.wait{width:11px;height:1px;border-radius:0;background:var(--line-2)}
.reg-row .r-sub{margin-top:4px}
.reg-row .r-x{text-align:right}

/* ── overview: what the company does ───────────────────────
   One KAD had a numbered section and a table row to itself. It is a single
   fact about identity, so it is the public page's gold-ruled panel instead. */
.kad-rest{margin:11px 0 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;color:var(--ink-3)}

/* ── overview: the latest accounts ─────────────────────────
   No rules of its own. The block is a .kv list, the same primitive the seat
   and contact block uses, because both are short lists of things the record
   states and there is no reason for them to look like different objects.

   What was here before, in order: four small multiples whose x-domain was the
   years we had parsed rather than the years the company filed, and then a
   multi-year table that fixed the domain and was still more accounts than an
   overview should carry. */

/* ── page frame ────────────────────────────────────────────
   The app is denser than the public pages by intent: the same reader is here
   for an hour, not for one answer, so the vertical rhythm tightens. */
.app-main{max-width:1330px;margin:0 auto;
  padding:clamp(20px,3vw,32px) clamp(18px,4vw,40px) clamp(48px,6vw,72px)}
/* A page whose band sets the measure keeps the same measure below it, so the
   band's content and the page's content share a left edge. .wrap, which the
   band uses, is 1180. */
.app-main.narrow{max-width:820px}
.app-main.mid{max-width:1180px}

/* One title pattern for every page, so «Ρυθμίσεις» and «Λίστα παρακολούθησης»
   are set the same way instead of each page inventing a heading. */
.pghd{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:2px solid var(--ink);
  margin-bottom:clamp(20px,2.6vw,28px)}
.pghd-b{min-width:0;flex:1}
.pghd-t{font-family:var(--ui);font-weight:700;font-size:clamp(22px,2.6vw,29px);
  letter-spacing:-.026em;line-height:1.1;margin:0}
.pghd-s{font-size:13px;color:var(--ink-3);margin:7px 0 0;max-width:70ch;line-height:1.5}
.pghd-a{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* ── footer ────────────────────────────────────────────────
   A rule and a line of type. The public footer is a dark marketing block
   because that page has something to sell; this one is already sold to. */
.appfoot{border-top:1px solid var(--line);margin-top:auto}
.appfoot-in{max-width:1330px;margin:0 auto;
  padding:16px clamp(18px,4vw,40px);display:flex;align-items:baseline;
  gap:9px 16px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;color:var(--ink-4)}
.appfoot-in .mark{font-family:var(--mark);font-size:19px;letter-spacing:0;
  color:var(--ink-3)}
.appfoot-in a:hover{color:var(--gold)}

/* Sticky footer without a fixed height: the shell is a column and the content
   takes the slack, so short pages still close on a rule at the bottom.

   Every child is flex:0 0 auto except the main column. Without that, the shell
   is a column flex container whose default flex-shrink:1 lets a tall child be
   squashed to fit the viewport: the dark band collapsed to its own padding and
   clipped the search and figures inside it. */
/* min-height on the body alone. `html,body{height:100%}` pins the document to
   exactly one viewport, which is the old way of doing a sticky footer and can
   leave the page unable to scroll past that height. 100vh needs neither. */
body.app{display:flex;flex-direction:column;min-height:100vh}
body.app > *{flex:0 0 auto}
body.app .app-main{flex:1 0 auto;width:100%;min-height:0}

/* ── section rhythm ────────────────────────────────────────
   The section counter is reset by the column that holds the sections. On the
   public pages that is .mcol; here it is the main element, and without this
   every section renders as 01. */
.app-main{counter-reset:sec}
/* Denser than the public pages by intent: a reader is here for an hour, not
   for one answer, so sections sit closer than they do on an SEO page. */
.app-main .blk + .blk{margin-top:clamp(30px,3.6vw,48px)}

/* ── research modal ────────────────────────────────────────
   Shipped by _app_shell_scripts.html on every page. Its styling used to live
   in main.css only, so under this shell the form rendered inline at the foot
   of the page instead of as a closed dialog. */
.research-modal-overlay{position:fixed;inset:0;z-index:3000;
  background:rgba(20,16,11,.55);display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.research-modal-overlay.open{opacity:1;visibility:visible}
.research-modal{width:100%;max-width:440px;background:var(--card);
  border:1px solid var(--line-2);border-top:3px solid var(--gold);
  box-shadow:0 30px 70px -30px rgba(20,16,11,.5);padding:22px 24px 24px}
.research-modal h3{font-family:var(--ui);font-weight:700;font-size:19px;
  letter-spacing:-.018em;margin:0 0 16px;padding-bottom:11px;
  border-bottom:2px solid var(--ink)}
.research-modal-field{margin-bottom:14px}
.research-modal-field label{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.research-modal-field input,.research-modal-field textarea{width:100%;
  font-family:var(--ui);font-size:13.5px;color:var(--ink);background:var(--card);
  border:1px solid var(--line-2);border-radius:0;padding:9px 11px;outline:0;
  transition:border-color .16s,box-shadow .16s}
.research-modal-field textarea{font-family:var(--mono);font-size:12.5px;resize:vertical}
.research-modal-field input:focus,.research-modal-field textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.research-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.research-modal-cancel,.research-modal-create{padding:10px 18px;font-family:var(--ui);
  font-size:12.5px;font-weight:600;border-radius:0;cursor:pointer;transition:background .15s,color .15s}
.research-modal-cancel{background:var(--card);border:1px solid var(--line-2);color:var(--ink-2)}
.research-modal-cancel:hover{background:var(--paper-2);color:var(--ink)}
.research-modal-create{background:var(--ink);border:1px solid var(--ink);color:var(--paper)}
.research-modal-create:hover{background:var(--gold);border-color:var(--gold);color:#fff}

/* ── scroll cost of the paper grain ────────────────────────
   pollock.css paints the grain as a fixed, multiply-blended layer over the
   whole viewport. A blended fixed layer has to be re-composited on every
   scroll frame, which is affordable on a public page you read once and not on
   a tool scrolled all day.

   Same texture, tiled on the body instead: it scrolls with the content, which
   for a paper grain is if anything more correct, and it costs nothing. */
body.app::before{display:none}
body.app{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ── the home page ─────────────────────────────────────────
   No hero. The search sits on the page's own paper at the size of a primary
   action, and the page's weight comes from what is arranged under it: your own
   work down the main column, the registry's state down the side.

   .find comes from pollock.css; this only resizes it. */
/* The field is the page's one action, so it stays reachable while you read
   what is below it. Pinned under the header; the question and the hint fold
   away once it is stuck, so the pinned state costs one row rather than four. */
/* The heading and hint are ordinary content and scroll away. Only the field
   pins, at a height that never changes, so the page never reflows underneath
   the reader. It carries the body's own grain rather than a flat fill: a flat
   --paper patch over the textured ground showed as a rectangle a shade off. */
.ask-t{font-family:var(--ui);font-weight:700;font-size:clamp(22px,2.8vw,30px);
  letter-spacing:-.028em;line-height:1.12;
  margin:clamp(22px,3.4vw,36px) 0 clamp(14px,1.8vw,18px)}
.asksticky{position:sticky;top:calc(var(--navh,52px) - 1px);z-index:30;
  padding:9px 0 10px;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E")}
.find-lg{max-width:none;flex:none}
.ask-t{font-family:var(--ui);font-weight:700;font-size:clamp(22px,2.8vw,30px);
  letter-spacing:-.028em;line-height:1.12;margin:0 0 clamp(14px,1.8vw,18px)}
.find-lg{max-width:none;flex:none}
.find-lg .find-box{height:52px;padding:0 16px;gap:13px;border-color:var(--ink-4)}
.find-lg .find-box svg{width:19px;height:19px}
.find-lg .find-in{font-size:16px}
.find-lg .find-kbd{font-size:11px;padding:3px 8px}
.ask-k{margin:10px 0 clamp(26px,3.4vw,40px);font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  color:var(--ink-4)}

/* Two columns is what makes this read as a desk rather than a form: there is
   more than one thing here, and it is arranged. */
.desk{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,44px)}
@media(min-width:900px){.desk{grid-template-columns:minmax(0,1fr) 268px}}
.desk-main{min-width:0}
.desk-main .blk{margin-top:0}
.desk-side{min-width:0;display:flex;flex-direction:column;gap:clamp(22px,2.6vw,30px)}

/* Side panels. A rule and a gold tick, the same index treatment the public
   footer uses, rather than a card: nothing here is a separate object from the
   page, it is the page's margin note. */
.panel{border-top:1px solid var(--ink);padding-top:11px;position:relative}
.panel-k{margin:0 0 11px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400}
.panel-k a{margin-left:auto;color:var(--ink-4);letter-spacing:.09em;white-space:nowrap}
.panel-k a:hover{color:var(--gold)}
.panel-p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}

/* One figure per line, label under it. Read down the column they are three
   facts about the registry, not a scoreboard. */
.fact{padding:9px 0;border-bottom:1px solid var(--hair)}
.fact:last-child{border-bottom:0}
.fact b{display:block;font-family:var(--ui);font-weight:700;font-size:21px;
  line-height:1.05;letter-spacing:-.024em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.fact:first-child b{color:var(--gold)}
.fact span{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-3);line-height:1.35}

.panel-hit{display:block;border:1px solid var(--gold);background:var(--gold-wash);
  padding:11px 13px;font-size:12.5px;color:var(--ink-2);line-height:1.45;
  transition:background .14s}
.panel-hit:hover{background:rgba(168,118,42,.18)}
.panel-hit b{font-family:var(--ui);font-weight:700;font-size:17px;color:var(--gold);
  letter-spacing:-.02em}

/* A status light only where there is a status: persons do not have one. */
.dot.none{background:transparent}

/* The public pages number their sections because they are one long document
   read once, and the numeral is part of that editorial voice. An app page is a
   tool with two or three panels; numbering them says there is a sequence to
   follow when there is not. Pages that really are documents in the app (a
   company, a person) opt back in with .doc. */
.app-main .blk-t::before{content:none}
.app-main .doc .blk-t::before{content:counter(sec,decimal-leading-zero)}

/* ── the matched run ───────────────────────────────────────
   Typing 99838 and getting back 998380013 with nothing marked makes the reader
   re-find their own query in the result. The match is shown where it landed. */
.search-result-item mark{background:var(--gold-wash);color:var(--gold);
  font-weight:600;padding:0 1px;border-radius:0}
.search-result-meta mark{background:var(--gold-wash);color:var(--gold);font-weight:500}

/* The closest match. The backend ranks exact identifier, then starts-with,
   then contains, so the first row really is the answer; a gold edge and a
   heavier name say so instead of leaving it in a list of equals. */
.search-result-item.is-top{background:var(--paper);border-left:3px solid var(--gold);
  padding-left:9px}
.search-result-item.is-top .search-result-name{font-size:14px;font-weight:600;color:var(--ink)}
.search-result-item.is-top:hover{background:var(--gold-wash)}

/* A withheld registry entry, explained where it was withheld. Gold rule on the
   left like the public page's .lawnote, because it is the same kind of thing:
   an explanation standing in for data, not a warning about the company. */
.suppressed-note, .suppressed-note-row td{
  border-left:3px solid var(--gold);background:var(--paper-2);
  padding:13px 16px;font-size:12.5px;line-height:1.6;color:var(--ink-2);
  max-width:none;text-align:left}
.suppressed-note-row td{border-left-width:3px}


/* ── quick access ──────────────────────────────────────────
   The four destinations, back but not as a row of cards across the page: they
   are navigation, and navigation should not outweigh your own work. They sit
   in the side column under the registry panels, where there was empty page,
   and read as a ruled index rather than four tiles. */
.qa{display:flex;flex-direction:column}
.qa a{position:relative;display:block;padding:11px 0 11px 15px;
  border-top:1px solid var(--hair);transition:background .14s}
.qa a:first-child{border-top:0}
.qa a::before{content:"";position:absolute;left:0;top:16px;width:7px;height:1px;
  background:var(--line-2);transition:background .16s,width .16s}
.qa a:hover::before{background:var(--gold);width:11px}
.qa-t{display:block;font-size:12.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.005em}
.qa a:hover .qa-t{color:var(--gold)}
.qa-d{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.4}

/* When something was last opened. Mono, since it is data about the row rather
   than part of the name. */
.r-when{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-4);
  text-align:right;white-space:nowrap;padding-left:10px}
@media(max-width:560px){.r-when{display:none}}


/* ── tools ─────────────────────────────────────────────────
   Four destinations across the main column, under the search. Square, hairline,
   with the gold tick the section headings use, so they read as part of the same
   system rather than as four buttons dropped on the page. */
.tools{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:clamp(26px,3.4vw,40px)}
/* Hover is carried by the rule, not by a wash. The gold tint the rows use is
   right on a thin row and wrong across a card: at this size it covers enough
   area to read as a tan panel rather than as a highlight. The surface stays
   paper and the top rule draws itself across instead. */
/* More obviously pressable: each one is its own bordered object on the page's
   paper rather than a cell in a grid, it lifts a little under the cursor, and
   an arrow appears to say where it goes. */
.tools{display:grid;gap:10px;background:none;border:0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:clamp(26px,3.4vw,40px)}
.tool{position:relative;background:var(--card);border:1px solid var(--line-2);
  padding:14px 34px 15px 15px;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.tool:hover,.tool:focus-visible{transform:translateY(-2px);border-color:var(--gold);
  box-shadow:0 6px 14px -8px rgba(20,16,11,.28)}
.tool::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease}
.tool:hover::before,.tool:focus-visible::before{transform:scaleX(1)}
/* The arrow is drawn, not a glyph, so it keeps its weight at any size. */
.tool::after{content:"";position:absolute;right:15px;top:19px;width:6px;height:6px;
  border:1.5px solid var(--ink-4);border-left:0;border-bottom:0;
  transform:rotate(45deg);transition:border-color .16s ease,transform .16s ease}
.tool:hover::after{border-color:var(--gold);transform:rotate(45deg) translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){
  .tool,.tool::before,.tool::after{transition:none}
  .tool:hover{transform:none}}
.tool-t{display:block;font-size:13.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.008em}
.tool:hover .tool-t{color:var(--gold)}
.tool-d{display:block;margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--ink-3)}

/* ── the search field's own controls ───────────────────────
   The slash hint is only useful while the field is empty, so the submit arrow
   takes its place rather than sitting beside it. Filters is a doorway to the
   full search, kept quiet: it is the second choice, not the first. */
.find-go{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;
  background:var(--ink);border:0;border-radius:0;cursor:pointer;color:var(--paper);
  transition:background .15s}
.find-go:hover{background:var(--gold)}
.find-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.find-filters{display:flex;align-items:center;gap:6px;flex:0 0 auto;
  margin-left:4px;padding:0 10px;height:30px;border-left:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;transition:color .15s}
.find-filters:hover{color:var(--gold)}
.find-filters svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
@media(max-width:560px){.find-filters span{display:none}}


/* The heading sits closer to what it heads. The public pages give a section
   title room to breathe because it opens a long read; in the app a title is a
   label on the thing directly beneath it. */
/* ── section chrome in the app ─────────────────────────────
   The public page gives a section a numeral, a 23px heading and a 2px ink
   rule, because it is a document a stranger reads once and the heading is a
   landmark in a long scroll. This page is an instrument: the reader opens
   twenty of them a day, knows what ΓΕΜΗ is, and is scanning for a value, not
   reading an argument. A heading that size competes with the data underneath
   it, and the numeral implies a sequence to follow that does not exist.

   So a section here is labelled, not titled: the same mono the masthead uses
   for ΑΦΜ and the cells use for their keys, on a hairline. It reads as the
   name of a drawer rather than the title of a chapter, and the content starts
   immediately underneath. */
   The company overview overrides all of this: see the panel rules under the
   two columns below. The other pages keep the label until they are redesigned
   in turn, at which point this rule is what goes. */
.app-main .blk-hd{align-items:center;padding-bottom:6px;margin-bottom:11px;
  border-bottom:1px solid var(--line)}
.app-main .blk-t{font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.app-main .blk + .blk{margin-top:clamp(24px,2.6vw,32px)}
/* Explanation belongs on a page being read, not on one being used. What
   survives is the caveat that changes how a number should be taken, set as
   fine print under the block it qualifies. */
.app-main .lede{font-size:12.5px;margin-bottom:10px}
.fine{font-size:11.5px;color:var(--ink-4);line-height:1.45;margin:9px 0 0;max-width:60ch}

/* Sub-labels sat larger and darker than the section label above them, which
   inverted the hierarchy: the drawer's name read as quieter than the divider
   inside it. Below the label, and without the public page's gold tick, which
   is a flourish this page has no room for. */
.app-main .sub{font-size:9.5px;letter-spacing:.14em;color:var(--ink-4);
  padding-left:0;margin-bottom:8px}
.app-main .sub::before{display:none}

/* A register with nothing in it keeps the row's alignment but shows no mark.
   The dash that stood in for one read as a stray hyphen against the names. */
.reg-mk.none,.reg-mk.wait{background:transparent}

/* The primary ΚΑΔ had a 3px gold rule and a filled ground, which made the
   least consequential block on the page the heaviest object on it. Inside a
   section panel it needs no edges of its own at all; being first is what says
   it is primary. */
.ovcol .kad-main{border:0;background:none;padding:12px 13px 13px}

/* ── the overview's two columns ────────────────────────────
   One screen instead of four. What the registers hold and who runs the
   company are the two questions the page is opened for, so they take the
   wider column; what it does and how to reach it sit beside them. */
.ovcols{display:grid;gap:clamp(22px,2.6vw,30px) clamp(30px,3.4vw,46px);
  grid-template-columns:1fr;align-items:start}
@media(min-width:1060px){.ovcols{grid-template-columns:1.12fr .88fr}}
.ovcol > .blk:first-child{margin-top:0}
.ovcols + .blk{margin-top:clamp(24px,2.6vw,32px)}

/* ── the overview's panels ─────────────────────────────────
   A section is one object: a head on tinted ground and a body under it, inside
   a single box. What it replaces was a 10px grey label floating on a hairline
   above a white card that carried its own border, so the label's rule and the
   card's top edge were two horizontal lines a few pixels apart, five times
   down the page. The body read as stripes and there was nothing for the eye to
   land on after the masthead's 46px name.

   The border belongs to the section and is drawn once. Painting it onto each
   child was what left «53 ακόμη ΚΑΔ» and the ΑΦΜ caveat stranded on the paper
   outside the panels they belong to, and what made the two register groups
   look assembled from separate boxes. Now anything inside a block is visibly
   inside it, without any child having to know it is the last one.

   Scoped to .ovcols rather than .app-main: home and history use .blk too and
   have been signed off as they are. */
.ovcols .blk{border:1px solid var(--line-2);background:var(--card)}

/* The gold is 2px on the head's leading edge. The palette is neutral-dominant
   with one accent, and this is the only place on the page that spends it on
   structure. It replaces a tick before the label, which at 11px on a 1px rule
   with the label 8px away read as a stray dash rather than as a mark. */
.ovcols .blk-hd{margin:0;padding:9px 13px;background:var(--paper-2);
  border:0;border-bottom:1px solid var(--line-2);border-left:2px solid var(--gold)}
.ovcols .blk-t{font-size:10px;color:var(--ink-2);font-weight:600;letter-spacing:.15em}
.ovcols .blk-t::before{content:none}

/* Every surface inside gives up its edges and its ground to the section box.
   The rows keep their internal hairlines, which is the only rule they need. */
.ovcols .rows,.ovcols .kv,.ovcols .regs{border:0;background:none}

/* Text that is not a row is indented to the rows' gutter, so a caveat and a
   value start on the same line. */
.ovcols .lede,.ovcols .fine,.ovcols .sub,.ovcols .kad-rest,
.ovcols #reg-afm-note{margin:0;padding-left:13px;padding-right:13px;max-width:none}

/* A group divider inside a panel carries the rule above it and no space below,
   so it attaches to the rows it names rather than to the row above it, which
   is the way round it read before. */
.ovcols .sub{padding-top:12px;padding-bottom:7px;color:var(--ink-3);
  border-top:1px solid var(--line-2)}
.ovcols #reg-judicial-wrap > .sub{border-top:0;padding-top:11px}

/* Closing text ends its panel and takes the panel's bottom padding; opening
   text needs the edge under it rather than over it. */
.ovcols .fine,.ovcols .kad-rest{padding-top:10px;padding-bottom:11px;
  border-top:1px solid var(--line-2)}
.ovcols .lede{padding-top:10px;padding-bottom:10px;
  border-bottom:1px solid var(--line-2)}

/* A dense key/value list, for the block nobody came here to read. Rows rather
   than cells: eight bordered boxes for a postcode and a phone number is more
   furniture than the content deserves. */
.kv{border:1px solid var(--line);background:var(--card)}
/* The divider is the row's bottom edge, not its top, and the exception is the
   last row rather than the first.

   As a top border with `.kv-r:first-child{border-top:0}` it had two faults,
   both visible on the seat and contact block. The selector is unscoped, so it
   also matched the first row inside #chamber-card, which is a display:contents
   wrapper holding Επιμελητήριο and Αρ. Εγγραφής: the rule that was meant to
   clear the top of the list cleared the divider above Επιμελητήριο instead,
   leaving Τ.Κ. and it fused into one row. And #municipality-cell is the real
   first child but is hidden whenever there is no municipality, so on those
   companies the first visible row kept a top border and drew a second line
   directly under the panel head.

   Bottom-first has neither problem: whichever row happens to render first
   simply has no edge above it, and the panel's own border closes the list. */
.kv-r{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:8px 13px;border-bottom:1px solid var(--line)}
.kv > .kv-r:last-child,.kv > div:last-child > .kv-r:last-child{border-bottom:0}
.kv-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);flex:0 0 auto}
.kv-v{font-size:12.5px;color:var(--ink-2);text-align:right;min-width:0;
  overflow-wrap:anywhere}
.kv-v.mono{font-family:var(--mono);font-size:12px}
.kv-v a:hover{color:var(--gold)}
#chamber-card{display:contents}
#chamber-card[hidden]{display:none}


/* ── history ───────────────────────────────────────────────
   A day is the landmark, so it gets a real heading and its own rule; the rows
   beneath are what happened that day. Read down the page it is a diary. */
.day + .day{margin-top:clamp(22px,2.8vw,32px)}
.day-k{display:flex;align-items:baseline;gap:11px;margin:0 0 7px;
  padding-bottom:6px;border-bottom:1px solid var(--ink);
  font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:-.012em;
  color:var(--ink);text-transform:none}
.day-k i{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-style:normal;
  font-weight:400;color:var(--ink-4)}
.hsearch{width:min(260px,42vw)}
.hsearch .find-box{height:34px}
.hsearch .find-in{font-size:13px}
.pager{display:flex;gap:10px;justify-content:center;margin-top:clamp(24px,3vw,34px)}
.pager .auth-btn{width:auto;min-width:150px;height:38px;text-decoration:none}

/* The history is a record, so its timestamps are part of the content rather
   than a caption on it: darker than the faint meta grey, and tabular so a
   column of times lines up digit for digit. */
.day .r-when{color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* A figure the record does not carry is set in the band's muted ink. In gold
   at 27px an em dash reads as a rule drawn across the masthead. */
.band .kpi-v.none{color:var(--band-mid);font-weight:500}
/* The first sub-heading in a section follows the lede, not a rule, so it needs
   the gap the .blk-hd would otherwise have given it. */
.lede + .sub{margin-top:18px}

@media(max-width:640px){
  /* Stacked one per row, five measures put 350px of band above the record.
     Two columns carry the same figures in half the height; the cell rules go,
     because at this width the gap already separates them. */
  .band .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;
    padding-top:16px}
  .band .kpi{padding:0;border-right:0;border-bottom:0}
  .band .kpi-v{font-size:20px}
  .band .kpi-k{margin-top:6px}
}



/* A filter over a long list. Shared by every app page that has one; it started
   on the company page's activity list and the person page needs the same
   control, so it lives here rather than in a page's own sheet. */
.kad-q-wrap { margin-bottom: 13px; }
.kad-q {
    width: 100%;
    padding: 9px 12px;
    font-family: var(--ui);
    font-size: 13px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line-2);
}
.kad-q:focus { outline: 2px solid var(--gold); outline-offset: -1px; }


/* ── data card and data table ──────────────────────────────
   The record table: a head on tint over a bordered box, rows on hairlines,
   figures on tabular numerals. It was written for the company page and then
   copied into the screener, and is wanted again by the watchlist and the
   registrations feed, so it lives here now and pollock-company.css keeps only
   the overrides that page actually needs. Column heads take the scale sheet's
   label treatment, which already names .data-table th. */
.data-card{background:var(--card);border:1px solid var(--line-2);border-radius:0;overflow:hidden}
.data-table{width:100%;border-collapse:collapse}
.data-table th{padding:9px 13px;text-align:left;font-family:var(--mono);font-size:9.5px;
  font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  background:var(--paper-2);border-bottom:1px solid var(--line-2);white-space:nowrap}
.data-table td{padding:11px 13px;font-size:13px;color:var(--ink-2);
  border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums;vertical-align:top}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:var(--gold-wash)}
.data-table a{color:inherit;font-weight:inherit}
.data-table a:hover{color:var(--gold);text-decoration:underline;text-underline-offset:2px}