/* DIA_PORTAL_MENU_V1 (build run M): the client portal's one menu, the Today home, its own pages, and (Part 2) the list
   and document pages' layout and the portal's type sizes while the new menu is on.
   Colours and font ONLY from css/diano-theme.css (var(--dia-*)); no colour is written here
   (scripts/build-m/portal-menu.page.emulator.mjs checks it).
   Part 2 (Jonathan, 15 Oct): one flat list, one line per screen -- small line icon, name in sentence case and regular
   weight, the record count in a small grey pill; 14 px text, 38 px rows with thin lines between them; the open screen
   marked with a light background and a gold bar. Body 14 px; page titles 22-24 px, sections 18 px; figures 24-28 px.
   Everything is scoped to html.dpm-on (set by js/portal-menu.js before the signed-in page is drawn), so the
   "Classic menu" (html without dpm-on) is exactly the page as it was. The Administration area (owner.html) does not
   load this file. */

/* ---------- the shell: our side column replaces the old dark <aside> ---------- */
html.dpm-on .shell{grid-template-columns:248px minmax(0,1fr)!important;background:var(--dia-page)}
html.dpm-on .shell>aside{display:none!important}
html.dpm-on #diaPhoneMenuBtn,html.dpm-on #diaPhoneBackdrop{display:none!important}
html.dpm-on .shell>.main>header .actions button[onclick*="dianoOpenSmartNavigationV1"]{display:none!important}

#diaPortalSide{display:none}
/* the menu scrolls on its own; the page does not move with it */
html.dpm-on #diaPortalSide{display:flex;flex-direction:column;position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--dia-surface);border-right:1px solid var(--dia-line);font-family:var(--dia-font);color:var(--dia-ink);padding:0 0 8px}
#diaPortalSide .dpm-brand{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 16px;border-bottom:1px solid var(--dia-line);text-decoration:none;color:var(--dia-ink);flex:0 0 auto}
#diaPortalSide .dpm-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:var(--dia-gold);color:var(--dia-ink);font-weight:800;font-size:14px}
#diaPortalSide .dpm-brand b{display:block;font-size:14px;font-weight:800;line-height:1.15}
#diaPortalSide .dpm-brand small{display:block;font-size:12px;font-weight:500;color:var(--dia-muted);line-height:1.2;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* one line per screen */
#diaPortalSide .dpm-lines{display:flex;flex-direction:column}
#diaPortalSide .dpm-line{display:flex;align-items:center;gap:10px;width:100%;height:38px;min-height:38px;border:0;border-bottom:1px solid var(--dia-line);background:transparent;color:var(--dia-ink);
  font:inherit;font-family:var(--dia-font);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;text-align:left;padding:0 12px 0 16px;cursor:pointer;flex:0 0 auto}
#diaPortalSide .dpm-ico{flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--dia-muted)}
#diaPortalSide .dpm-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the count's room is there from the start (no layout change when it arrives) */
#diaPortalSide .dpm-count{flex:0 0 auto;min-width:46px;text-align:right;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--dia-muted)}
#diaPortalSide .dpm-count:not(:empty){min-width:0;margin-left:auto;padding:1px 8px;border-radius:999px;background:var(--dia-page);border:1px solid var(--dia-line)}
#diaPortalSide .dpm-count[data-none]{min-width:0}
#diaPortalSide .dpm-line:hover{background:var(--dia-page)}
#diaPortalSide .dpm-line.is-current{background:var(--dia-gold-soft);box-shadow:inset 3px 0 0 var(--dia-gold)}
#diaPortalSide .dpm-line.is-current .dpm-ico{color:var(--dia-ink)}
#diaPortalSide .dpm-line:focus-visible,#diaPortalSide .dpm-minor:focus-visible{outline:2px solid var(--dia-gold);outline-offset:-2px}
#diaPortalSide .dpm-foot{margin-top:auto;padding:8px 10px 0;display:flex;justify-content:space-between;gap:8px;flex:0 0 auto}
#diaPortalSide .dpm-minor{border:0;background:none;padding:4px 6px;font:inherit;font-family:var(--dia-font);font-size:12px;font-weight:500;color:var(--dia-muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#diaPortalSide .dpm-minor:hover{color:var(--dia-link-hover)}

/* Customize: the same lines with a tick box */
#diaPortalSide .dpm-cz{display:flex;flex-direction:column}
#diaPortalSide .dpm-cz-help{margin:10px 14px;font-size:12.5px;color:var(--dia-muted);line-height:1.4}
#diaPortalSide .dpm-cz-presets{display:flex;flex-direction:column;gap:6px;margin:0 14px 10px}#diaPortalSide .dpm-cz-presets .dpm-btn{white-space:normal;text-align:left;line-height:1.3;height:auto;padding:8px 10px}
#diaPortalSide .dpm-cz-row{display:flex;align-items:center;gap:10px;height:38px;border-bottom:1px solid var(--dia-line);padding:0 12px 0 14px;font-size:14px;cursor:pointer}
#diaPortalSide .dpm-cz-row input{width:16px;height:16px;margin:0;accent-color:var(--dia-ink)}
#diaPortalSide .dpm-cz-bar{display:flex;gap:8px;padding:10px 14px;position:sticky;bottom:0;background:var(--dia-surface);border-top:1px solid var(--dia-line)}

/* ---------- the top bar: small and quiet ---------- */
html.dpm-on .shell>.main>header{min-height:52px;height:52px;padding:0 24px;background:var(--dia-surface);border-bottom:1px solid var(--dia-line);font-family:var(--dia-font);display:flex;align-items:center;justify-content:space-between;gap:12px}
html.dpm-on .shell>.main>header .actions{display:flex;gap:2px;align-items:center;flex-wrap:nowrap}
html.dpm-on .shell>.main>header .actions button,html.dpm-on #diaSwitchBusinessBtn{font-family:var(--dia-font)!important;font-weight:500!important;font-size:14px!important;border-radius:var(--dia-radius)!important;min-height:36px;padding:6px 10px!important;margin:0!important;
  border:0!important;background:transparent!important;color:var(--dia-ink)!important;box-shadow:none!important;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.dpm-on .shell>.main>header .actions button,html.dpm-on #diaSwitchBusinessBtn{display:inline-flex;align-items:center;line-height:1.2;height:36px}
html.dpm-on .shell>.main>header .actions button:hover,html.dpm-on #diaSwitchBusinessBtn:hover{background:var(--dia-page)!important;color:var(--dia-link-hover)!important}
#dpmSupportBtn{display:none}
html.dpm-on #dpmSupportBtn{display:inline-flex}
#dpmMenuBtn{display:none}
#dpmHeadCo{display:none}
html.dpm-on #dpmHeadCo{display:block;font-size:15px;font-weight:700;color:var(--dia-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.dpm-on .shell>.main>header>div:first-of-type>:not(#dpmHeadCo){display:none!important}
html.dpm-on .shell>.main{background:var(--dia-page);min-height:100vh}
html.dpm-on body{background:var(--dia-page)}
html.dpm-on .shell>.main>main{padding:20px 26px 60px;background:transparent;font-size:14px}

/* ---------- sizes across the portal (the old pages' own headings too) ---------- */
html.dpm-on #liteContent{font-family:var(--dia-font);font-size:14px;color:var(--dia-text)}
/* the old pages' body text (their tables, forms, lists): 14 px; a size written on an element itself still wins */
html.dpm-on #liteContent :is(p,li,td,th,label,input,select,textarea){font-size:14px}
html.dpm-on #liteContent h1{font-size:23px!important;line-height:1.25!important}
html.dpm-on #liteContent h2{font-size:18px!important;line-height:1.3!important}
html.dpm-on #liteContent h3{font-size:16px!important;line-height:1.3!important}
html.dpm-on #liteContent .dl-title,html.dpm-on #liteContent .de-title{font-size:22px!important;font-weight:700}

/* ---------- pages (Today, Reports, Settings, My profile, Help) ---------- */
.dpm-page{font-family:var(--dia-font);color:var(--dia-text);max-width:1180px;font-size:14px}
.dpm-page h1{font-size:23px;line-height:1.25;margin:0;color:var(--dia-ink);font-weight:700}
.dpm-page h2{font-size:18px;margin:22px 0 10px;color:var(--dia-ink);font-weight:700}
.dpm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:40px;margin-bottom:12px}
.dpm-muted{color:var(--dia-muted)}
.dpm-crumb,.dl-crumb,.de-crumb{display:block!important;font-size:13px;color:var(--dia-muted);margin:0 0 8px}
.dpm-crumb a,.dl-crumb a,.de-crumb a{color:var(--dia-ink);text-decoration:none;cursor:pointer}
.dpm-crumb a:hover,.dl-crumb a:hover,.de-crumb a:hover{color:var(--dia-link-hover);text-decoration:underline}
.dpm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.dpm-tile{display:flex;flex-direction:column;justify-content:space-between;height:92px;padding:12px 14px;background:var(--dia-surface);border:1px solid var(--dia-line);
  border-radius:var(--dia-radius);color:var(--dia-ink);font:inherit;font-family:var(--dia-font);text-align:left;cursor:pointer}
.dpm-tile:hover{border-color:var(--dia-ink)}
.dpm-tile span{font-size:13px;font-weight:500;color:var(--dia-muted)}
.dpm-tile strong{font-size:24px;line-height:1.15;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpm-note{min-height:20px;margin:8px 0 0;font-size:13px}
.dpm-box{background:var(--dia-surface);border:1px solid var(--dia-line);border-radius:var(--dia-radius);padding:4px 16px;min-height:110px}
.dpm-box>p{margin:14px 0}
.dpm-att{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--dia-line)}
.dpm-att:first-child{border-top:0}
.dpm-att b{display:block;font-weight:600}
.dpm-att small{color:var(--dia-muted);display:block;font-size:13px}
.dpm-hub{padding:0;min-height:0}
.dpm-hub-line{display:flex;align-items:center;width:100%;height:40px;border:0;border-bottom:1px solid var(--dia-line);background:transparent;color:var(--dia-ink);font:inherit;font-family:var(--dia-font);font-size:14px;text-align:left;padding:0 16px;cursor:pointer}
.dpm-hub-line:last-child{border-bottom:0}
.dpm-hub-line:hover{background:var(--dia-page);color:var(--dia-link-hover)}
.dpm-btn{font:inherit;font-family:var(--dia-font);font-weight:600;font-size:14px;border-radius:var(--dia-radius);padding:7px 14px;min-height:36px;cursor:pointer;
  border:1px solid var(--dia-input);background:var(--dia-surface);color:var(--dia-ink);display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}
.dpm-btn:hover{border-color:var(--dia-ink)}
.dpm-btn[disabled]{opacity:.55;cursor:default}
.dpm-primary{background:var(--dia-ink);border-color:var(--dia-ink);color:var(--dia-surface)}
.dpm-primary:hover{background:var(--dia-ink-2)}
.dpm-sm{min-height:32px;padding:4px 12px;font-size:13px}
.dpm-card{background:var(--dia-surface);border:1px solid var(--dia-line);border-radius:var(--dia-radius);padding:14px 18px;margin-bottom:14px}
.dpm-card h2{margin-top:0}
.dpm-dl{display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);gap:0;margin:0;font-size:14px}
.dpm-dl dt,.dpm-dl dd{padding:8px 0;border-top:1px solid var(--dia-line);margin:0;overflow-wrap:anywhere}
.dpm-dl dt{color:var(--dia-muted);padding-right:14px}
.dpm-dl dt:first-of-type,.dpm-dl dt:first-of-type+dd{border-top:0}
.dpm-msg{min-height:22px;margin:10px 0 0;font-weight:600}
.dpm-msg[data-result="error"]{color:var(--dia-danger)}
.dpm-msg[data-result="ok"]{color:var(--dia-success)}
.dpm-list{list-style:none;margin:0;padding:0}
.dpm-list li{padding:9px 0;border-top:1px solid var(--dia-line)}
.dpm-list li:first-child{border-top:0}
html.dpm-on #diaMyProfilePage+#diaTwoStepCard{border-radius:var(--dia-radius);box-shadow:none;font-family:var(--dia-font)}
[data-screen-refused] .empty{padding:16px;background:var(--dia-surface);border:1px solid var(--dia-line);border-radius:var(--dia-radius);color:var(--dia-ink)}

/* ---------- list pages (js/list.js) while the new menu is on ---------- */
html.dpm-on .dl{font-family:var(--dia-font);font-size:14px;color:var(--dia-text)}
html.dpm-on .dl-head{margin-bottom:8px}
html.dpm-on .dl-count{background:var(--dia-page);border:1px solid var(--dia-line);color:var(--dia-muted);font-weight:600}
html.dpm-on .dl button{font-family:var(--dia-font);border-color:var(--dia-input);border-radius:var(--dia-radius);min-height:34px;padding:5px 12px;color:var(--dia-ink);background:var(--dia-surface)}
html.dpm-on .dl button.dl-primary{background:var(--dia-ink);border-color:var(--dia-ink);color:var(--dia-surface);font-weight:600}
html.dpm-on .dl-bar input,html.dpm-on .dl-bar select,html.dpm-on .dl-panel input,html.dpm-on .dl-panel select,html.dpm-on .dl-panel textarea{font-family:var(--dia-font);border-color:var(--dia-input);border-radius:var(--dia-radius);min-height:34px;color:var(--dia-text);background:var(--dia-surface)}
html.dpm-on .dl-bar .dl-q{flex:0 1 360px}
.dl [data-dl=filtersBtn]{display:none}
html.dpm-on .dl [data-dl=filtersBtn]{display:inline-block}
html.dpm-on .dl-filters:not(.is-open){display:none}
html.dpm-on .dl-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 100%}
/* the old pages' global table styles (thick dark borders, large type) are overridden here, for the lists only */
html.dpm-on .dl table{background:var(--dia-surface)!important;border:1px solid var(--dia-line)!important;border-radius:var(--dia-radius);border-collapse:separate!important;border-spacing:0!important;table-layout:auto;box-shadow:none!important}
html.dpm-on .dl th,html.dpm-on .dl td{padding:7px 10px!important;font-size:13.5px!important;font-weight:400;line-height:1.35!important;border:0!important;border-bottom:1px solid var(--dia-line)!important;background:transparent;color:var(--dia-text)!important}
html.dpm-on .dl td[data-col=number],html.dpm-on .dl td[data-col=date],html.dpm-on .dl td[data-col=total],html.dpm-on .dl td[data-col=due],html.dpm-on .dl td[data-col=status],html.dpm-on .dl td[data-col=code],html.dpm-on .dl td.dl-acts{white-space:nowrap}
html.dpm-on .dl td[data-col=number]{font-weight:600}
html.dpm-on .dl th{background:var(--dia-page)!important;color:var(--dia-muted)!important;font-size:12px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;white-space:nowrap}
html.dpm-on .dl th.dl-num,html.dpm-on .dl td.dl-num{text-align:right!important}
html.dpm-on .dl th[data-sort]{cursor:pointer}
html.dpm-on .dl th[data-sort]:hover{color:var(--dia-ink)!important}
html.dpm-on .dl th[data-sorted="asc"]::after{content:" \2191"}
html.dpm-on .dl th[data-sorted="desc"]::after{content:" \2193"}
html.dpm-on .dl tbody tr:last-child td{border-bottom:0}
html.dpm-on .dl tbody tr:hover td{background:var(--dia-page)}
html.dpm-on .dl-acts button{min-height:28px!important;padding:2px 10px!important;font-size:13px}
/* status badges: success / danger / gold tokens */
html.dpm-on .dl-pill,html.dpm-on .de-pill{border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;text-decoration:none;border:1px solid var(--dia-line);background:var(--dia-page);color:var(--dia-muted)}
html.dpm-on .dl-f-done,html.dpm-on .de-pill[data-family="done"]{color:var(--dia-success);border-color:var(--dia-success);background:var(--dia-surface)}
html.dpm-on .dl-f-overdue,html.dpm-on .dl-f-cancelled,html.dpm-on .de-pill[data-family="overdue"],html.dpm-on .de-pill[data-family="cancelled"]{color:var(--dia-danger);border-color:var(--dia-danger);background:var(--dia-surface)}
html.dpm-on .dl-f-open,html.dpm-on .dl-f-part,html.dpm-on .de-pill[data-family="open"],html.dpm-on .de-pill[data-family="part"]{color:var(--dia-ink);border-color:var(--dia-gold);background:var(--dia-gold-soft)}
html.dpm-on .dl-f-draft,html.dpm-on .dl-f-other,html.dpm-on .de-pill[data-family="draft"],html.dpm-on .de-pill[data-family="other"]{color:var(--dia-muted);border-color:var(--dia-line);background:var(--dia-page)}
html.dpm-on .dl-pager button{min-height:32px}
html.dpm-on .dl-note{color:var(--dia-ink);background:var(--dia-gold-soft);border-color:var(--dia-gold)}

/* ---------- document pages (js/doc-editor.js) ---------- */
html.dpm-on .de{font-family:var(--dia-font);font-size:14px;color:var(--dia-text)}
html.dpm-on .de button{font-family:var(--dia-font);border-color:var(--dia-input);border-radius:var(--dia-radius);min-height:34px;color:var(--dia-ink);background:var(--dia-surface)}
html.dpm-on .de button.de-primary{background:var(--dia-ink);border-color:var(--dia-ink);color:var(--dia-surface)}
.de-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px;padding:8px;background:var(--dia-surface);border:1px solid var(--dia-line);border-radius:var(--dia-radius)}
.de-actions .de-sp{flex:1}
.de-actions .de-menu-list{background:var(--dia-surface);border-color:var(--dia-input)}
.de-paper{background:var(--dia-surface);border:1px solid var(--dia-line);border-radius:var(--dia-radius);padding:32px 36px;max-width:900px;color:var(--dia-text);font-family:var(--dia-font);font-size:14px}
.de-p-head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:2px solid var(--dia-ink)}
.de-p-co{line-height:1.5;color:var(--dia-muted);font-size:13px;max-width:420px}
.de-p-co img{display:block;max-height:64px;max-width:220px;object-fit:contain;margin-bottom:8px}
.de-p-co b{display:block;color:var(--dia-ink);font-size:16px}
.de-p-doc{text-align:right}
.de-p-doc h1{margin:0 0 8px;font-size:23px;letter-spacing:.04em;text-transform:uppercase;color:var(--dia-ink)}
.de-p-doc dl{display:grid;grid-template-columns:auto auto;gap:3px 14px;margin:0;font-size:13px;justify-content:end}
.de-p-doc dt{color:var(--dia-muted)}
.de-p-doc dd{margin:0;font-weight:600;text-align:right}
.de-p-to{margin:18px 0;line-height:1.5;font-size:13px}
.de-p-to small{display:block;color:var(--dia-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.de-p-to b{color:var(--dia-ink);font-size:15px}
.de-p-lines{width:100%;border-collapse:collapse!important;margin:8px 0 14px;border:0!important;box-shadow:none!important;background:transparent!important}
.de-p-lines th{font-size:12px!important;color:var(--dia-muted)!important;font-weight:600!important;text-align:left;border:0!important;border-bottom:1px solid var(--dia-input)!important;padding:6px!important;background:transparent!important;text-transform:none!important}
.de-p-lines td{padding:7px 6px!important;border:0!important;border-bottom:1px solid var(--dia-line)!important;vertical-align:top;font-size:13.5px!important;background:transparent!important;color:var(--dia-text)!important}
.de-p-lines .de-num,.de-p-lines th.de-num{text-align:right!important;white-space:nowrap}
.de-p-tot{margin-left:auto;max-width:340px}
.de-p-tot div{display:flex;justify-content:space-between;padding:3px 0;font-size:13.5px}
.de-p-tot .de-grand{font-weight:700;font-size:16px;border-top:2px solid var(--dia-ink);margin-top:4px;padding-top:6px}
.de-p-notes{margin-top:18px;font-size:13px;color:var(--dia-muted);white-space:pre-line}
@media print{
  html.dpm-on #diaPortalSide,html.dpm-on .shell>.main>header,html.dpm-on #dpmMenuBtn,.de-actions,.de-crumb,.de-noprint{display:none!important}
  html.dpm-on .shell{display:block!important}
  html.dpm-on .shell>.main>main{padding:0!important}
  .de-paper{border:0;padding:0;max-width:none}
}

/* ---------- phones and narrow windows: the menu folds behind a top Menu button ---------- */
@media (max-width:760px){
  html.dpm-on .shell{grid-template-columns:minmax(0,1fr)!important}
  html.dpm-on #diaPortalSide{display:none;position:fixed;top:52px;left:0;right:0;bottom:auto;height:auto;max-height:calc(100vh - 52px);z-index:40;
    border-right:0;border-bottom:1px solid var(--dia-line);box-shadow:var(--dia-shadow-card)}
  html.dpm-on.dpm-menu-open #diaPortalSide{display:flex}
  html.dpm-on #diaPortalSide .dpm-brand{display:none}
  html.dpm-on #diaPortalSide .dpm-line,html.dpm-on #diaPortalSide .dpm-cz-row{height:44px;min-height:44px;font-size:15px}
  html.dpm-on .shell>.main>header{position:sticky;top:0;z-index:41;padding:0 10px;gap:6px}
  html.dpm-on .shell>.main>header>div:first-of-type{min-width:0;overflow:hidden;white-space:nowrap;flex:1 1 auto}
  /* DIA_PHONE_HEADER_V1 (Jonathan, 18 Oct; build P's acc-phone-suggestions.png): at 390 px the row wrapped and Settings /
     Logout hung below the 52 px bar over the page. One line: Menu, the company name (cut with "…"), the gear, Logout. */
  html.dpm-on .shell>.main>header{flex-wrap:nowrap!important;height:52px;overflow:hidden}
  html.dpm-on .shell>.main>header .actions{flex:0 0 auto;flex-wrap:nowrap}
  html.dpm-on #dpmSettingsBtn>span{display:none}
  html.dpm-on #dpmSettingsBtn{padding:6px 8px!important}
  html.dpm-on #dpmHeadCo{max-width:100%}
  html.dpm-on .shell>.main>header .actions #diaMyProfileBtn,html.dpm-on #diaSwitchBusinessBtn{display:none!important}
  /* DIA_SUPPORT_V1 (build run Q): Help & Support stays in the phone's top bar, as the icon and "Help" */
  html.dpm-on .shell>.main>header .actions #dpmSupportBtn .dpm-help-long{display:none}
  html.dpm-on .shell>.main>header .actions #dpmSupportBtn .dpm-help-short{display:inline}
  html.dpm-on #dpmMenuBtn{display:inline-flex!important;flex:0 0 auto}
  html.dpm-on .shell>.main>main{padding:14px 16px 50px}
  .dpm-page h1{font-size:22px}
  .dpm-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dpm-tile{height:84px;padding:10px 12px}
  .dpm-tile strong{font-size:24px}
  .dpm-note{min-height:40px}
  .dpm-att{grid-template-columns:minmax(0,1fr)}
  .dpm-att .dpm-btn{justify-self:start}
  html.dpm-on .dl-bar .dl-q{flex:1 1 100%}
  .de-paper{padding:18px 16px}
  .de-p-doc{text-align:left}
  .de-p-doc dl{justify-content:start}
  .de-p-lines thead{display:none}
  .de-p-lines tr{display:block;border-bottom:1px solid var(--dia-line);padding:6px 0}
  .de-p-lines td{display:flex;justify-content:space-between;border:0;padding:2px 0}
  .de-p-lines td[data-label]::before{content:attr(data-label);color:var(--dia-muted);font-size:12px;margin-right:12px}
  .de-p-lines .de-num{text-align:right}
}

/* ---------- DIA_MENU_PANEL_V1 (run 2026-10-17, P10b) + DIA_BOXES_V1 (P9b), Jonathan: clear boxes and lines ----------
   Tokens only (diano-theme.css): lines --dia-line (#E2E8F0), stronger lines --dia-input (#CBD5E1), page --dia-page (#F6F8FB),
   surface --dia-surface (#FFF), ink --dia-ink (#0B1B33), gold --dia-gold (#F2A93B), header bands --dia-table-head (#F1F5F9). */
/* the menu: a framed panel the height of the window; Today and the brand at the top, Settings / My profile at the bottom;
   only the screens between them scroll, inside the panel (the page never scrolls because of the menu) */
html.dpm-on #diaPortalSide{overflow:hidden;padding:0;border-right:1px solid var(--dia-input);background:var(--dia-page)}
#diaPortalSide .dpm-brand{background:var(--dia-surface);border-bottom:1px solid var(--dia-input)}
#diaPortalSide .dpm-pin{flex:0 0 auto;display:flex;flex-direction:column;background:var(--dia-page)}
#diaPortalSide .dpm-pin-top{border-bottom:1px solid var(--dia-input)}
#diaPortalSide .dpm-pin-bottom{border-top:1px solid var(--dia-input)}
#diaPortalSide .dpm-lines{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
#diaPortalSide .dpm-line{background:var(--dia-page);border-bottom:1px solid var(--dia-line)}
#diaPortalSide .dpm-line:hover{background:var(--dia-surface)}
#diaPortalSide .dpm-line.is-current{background:var(--dia-surface);box-shadow:inset 4px 0 0 var(--dia-gold);font-weight:700}
#diaPortalSide .dpm-foot{margin-top:0;padding:6px 10px 8px;background:var(--dia-page);border-top:1px solid var(--dia-line)}
/* Customize: the same panel; its list scrolls, Save / Cancel stay at the bottom of the panel */
#diaPortalSide .dpm-cz{flex:1 1 auto;min-height:0;overflow-y:auto;background:var(--dia-page)}
#diaPortalSide .dpm-cz-row{background:var(--dia-page);border-bottom:1px solid var(--dia-line)}
#diaPortalSide .dpm-cz-bar{border-top:1px solid var(--dia-input)}
/* the top bar: a bottom line; Settings (gear), Support, My profile, Logout as small outlined buttons */
html.dpm-on .shell>.main>header{border-bottom:1px solid var(--dia-input)}
html.dpm-on .shell>.main>header .actions button,html.dpm-on .shell>.main>header .actions .dpm-top{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--dia-input)!important;border-radius:8px!important;background:var(--dia-surface)!important;color:var(--dia-ink)!important;
  padding:4px 10px!important;min-height:30px;font-size:13px!important;font-weight:600!important;text-decoration:none!important;box-shadow:none!important}
html.dpm-on .shell>.main>header .actions button:hover{background:var(--dia-page)!important;border-color:var(--dia-ink)!important}
html.dpm-on #dpmSettingsBtn .dpm-ico{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* every section of a page is a boxed panel with a header strip */
.dpm-box,html.dpm-on #liteContent .doc-card,html.dpm-on #liteContent .dl{background:var(--dia-surface);border:1px solid var(--dia-input);border-radius:8px;box-shadow:0 1px 3px rgba(11,27,51,.06)}
.dpm-box-head{display:block;padding:9px 14px;background:var(--dia-table-head);border-bottom:1px solid var(--dia-input);border-radius:8px 8px 0 0;font-weight:700;font-size:14px;color:var(--dia-ink)}
.dpm-box-body{padding:12px 14px}
html.dpm-on #dpmAttention{padding:0;border:0;box-shadow:none}
html.dpm-on #dpmAttention>.dpm-att,html.dpm-on #dpmAttention>p,html.dpm-on #dpmAttention>.dpm-notice{margin:0;padding:10px 14px;border-bottom:1px solid var(--dia-line)}
/* figure tiles: a border, the label as a small header strip, the figure below */
.dpm-tile{padding:0!important;border:1px solid var(--dia-input)!important;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(11,27,51,.06)}
.dpm-tile>:first-child{display:block;padding:6px 12px;background:var(--dia-table-head);border-bottom:1px solid var(--dia-line);font-size:12px;font-weight:700;color:var(--dia-ink)}
.dpm-tile>:not(:first-child){padding:8px 12px}
/* tables: a header band, a line between every row, alternate shading, inside a bordered panel */
html.dpm-on #liteContent table{border-collapse:collapse;width:100%;background:var(--dia-surface)}
html.dpm-on #liteContent table thead th{background:var(--dia-table-head)!important;font-weight:700!important;color:var(--dia-ink)!important;border-bottom:1px solid var(--dia-input)!important}
html.dpm-on #liteContent table tbody tr{border-bottom:1px solid var(--dia-line)}
html.dpm-on #liteContent table tbody tr:nth-child(even){background:var(--dia-page)}
html.dpm-on #liteContent .dl table,html.dpm-on #liteContent .dia-users table{border:1px solid var(--dia-input);border-radius:8px;overflow:hidden}
/* the Settings and Reports lists: a boxed panel with a header strip and a line between entries */
.dpm-hub{overflow:hidden}
.dpm-hub .dpm-hub-line{display:block;width:100%;text-align:left;padding:11px 14px;border:0;border-bottom:1px solid var(--dia-line);background:var(--dia-surface);font:inherit;font-family:var(--dia-font);font-size:14px;color:var(--dia-ink);cursor:pointer}
.dpm-hub .dpm-hub-line:last-child{border-bottom:0}
.dpm-hub .dpm-hub-line:nth-child(odd){background:var(--dia-page)}
.dpm-hub .dpm-hub-line:hover{background:var(--dia-gold-soft)}
/* DIA_SUPPORT_V1 (build run Q): the top bar's Help & Support (full text on a laptop; see the phone rules above) */
#dpmSupportBtn .dpm-help-short{display:none}
#dpmSupportBtn .dpm-ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
