/* DOT-ID-APP-1 cabinet additions on top of vendor ui/tokens.css + ui/id-account.css (unchanged).
   Only values from the tokens; no new brand colours. dot-header-controls.css is loaded AFTER this file. */
.section-heading{font-size:20px;letter-spacing:-.03em;margin:34px 0 14px}
.overview-status{margin-bottom:6px}
.overview-status .detail-row strong{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.setup-card p{color:var(--dot-text-muted);font-size:13px;line-height:1.5;margin:0}
.setup-card .card-head{display:flex;justify-content:space-between;gap:12px;align-items:start}
a.card.link{color:inherit;text-decoration:none}
a.card.link:focus-visible{outline:2px solid var(--dot-red);outline-offset:2px}

.stack-form{display:grid;gap:16px;max-width:720px}
.stack-form .card h2,.appearance-card h2{font-size:18px;margin:0 0 16px}
.form-field{display:grid;gap:8px;margin:0 0 18px}
.form-field label,.field-label{font-size:13px;font-weight:700}
.form-field input[type=text],.form-field select{min-height:46px;width:100%;max-width:420px;border:1px solid var(--dot-control-border);
  border-radius:var(--dot-radius-control);background:var(--dot-surface);color:var(--dot-text);font:400 15px var(--dot-font-ui);padding:9px 13px;box-sizing:border-box}
.form-field input:focus-visible,.form-field select:focus-visible,.appearance-options input:focus-visible{outline:2px solid var(--dot-red);outline-offset:2px}
.form-field input[aria-invalid=true]{border-color:#b42626}
.field-error{font-size:12px;color:#b42626;margin:0}
[data-dot-theme=dark] .field-error{color:#f3b3b3}
.field-hint{font-size:12px;color:var(--dot-text-muted);margin:0;line-height:1.5}
.readonly-value{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-size:15px;font-weight:700}
.form-actions{display:flex;gap:10px;align-items:center}
.form-actions .button{width:auto;min-width:140px}
.button[aria-busy=true]{opacity:.7;cursor:progress}
.communication-grid{margin-top:0}

/* one message per action, in one place, at the top of the content */
.form-message{border-radius:12px;padding:13px 16px;margin:0 0 22px;font-size:13px;font-weight:700;max-width:720px;transition:opacity var(--dot-motion-fast)}
.form-message.success{background:#e9f5ee;color:#205a39;border:1px solid #c7dbcd}
.form-message.error{background:#fff1f1;color:#a42222;border:1px solid #e3b4b4}
[data-dot-theme=dark] .form-message.success{background:#1c382b;color:#b9e9ca;border-color:#456552}
[data-dot-theme=dark] .form-message.error{background:#3a2526;color:#f3b3b3;border-color:#966565}
.form-message.notice{background:#fff7e8;color:#6b4a0c;border:1px solid #ecd6a8}
[data-dot-theme=dark] .form-message.notice{background:#3a3020;color:#f1d79c;border-color:#7c6638}
.form-message.fade{opacity:0}

.row p{margin:4px 0 0;font-size:12px;color:var(--dot-text-muted);line-height:1.45;overflow-wrap:anywhere}
.row-aside form{margin:0}
.row-aside .button{width:auto}
.empty-state{border:1px dashed var(--dot-border);border-radius:var(--dot-radius-card);padding:22px;color:var(--dot-text-muted);font-size:13px}
.session-hint{font-size:12px;color:var(--dot-text-muted);margin-top:14px}

.footer-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-pending{color:var(--dot-text-muted)}
.mobile-controls{display:none}
.header-actions{display:flex;align-items:center;gap:12px}
.language-picker{position:relative}
.language-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60}
.account-dropdown .user-menu form{margin:0}

body[data-page=public]{background:var(--dot-bg);color:var(--dot-text);min-height:100vh;display:flex;flex-direction:column}
.signed-out-screen{flex:1}
.public-langs{display:flex;gap:6px}
.public-langs a{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--dot-border);
  border-radius:9px;font:700 11px var(--dot-font-ui);color:var(--dot-text);text-decoration:none}
.public-langs a[aria-current=true]{border-color:var(--dot-red)}
.public-action .button{display:inline-flex;align-items:center;width:auto;text-decoration:none}

@media(max-width:760px){
  .mobile-controls{display:flex;align-items:center;gap:10px;margin-left:auto}
  .header-actions:empty{display:none}
  .sidebar-top .user-menu{right:0}
  .form-field input[type=text],.form-field select{max-width:100%}
  .form-actions .button{width:100%}
  .row-aside .button{width:auto}
}
.side-section{text-transform:uppercase}
@media(max-width:760px){
  .mobile-controls .header-actions{width:auto;justify-content:flex-end;gap:10px;flex-wrap:nowrap}
  .sidebar-top{gap:12px}
  .setup-card{min-height:0}
  .setup-card .card-link{padding-top:16px}
}
@media(max-width:760px){
  /* the reference limits .sidebar-top .account-dropdown to (100% - 136px) of the top bar; here the dropdown sits in
     the controls group next to the language picker, so that limit would collapse it to 0 */
  .mobile-controls .account-dropdown{max-width:none}
}
/* dark theme: the avatar background (#222427) equals the dark header surface — same outline as the reference's
   mobile top-bar avatar (#65696c) keeps the circle visible */
[data-dot-theme=dark] .header .account-dropdown>.avatar{border-color:#65696c}

/* ---------------------------------------------------------------- DOT-ID-APP-2 additions (token values only) */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--dot-surface);color:var(--dot-text);padding:10px 14px;border-radius:9px;border:1px solid var(--dot-border)}
.skip-link:focus{left:12px}
.test-mode-note{border:1px solid #e3b4b4;background:var(--dot-accent-tint);color:var(--dot-text);border-radius:12px;padding:11px 14px;font-size:12px;line-height:1.55;margin:0 0 18px}
.context-note{font-size:12px;line-height:1.5}
.inline-form{display:inline-flex;margin:0}
.confirm-action{display:inline-block;position:relative}
.confirm-action>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
.confirm-action>summary::-webkit-details-marker{display:none}
.confirm-action[open]>summary{border-color:var(--dot-red)}
.confirm-body{margin-top:10px;padding:14px;border:1px solid var(--dot-border);border-radius:12px;background:var(--dot-surface);max-width:420px}
.confirm-body p{font-size:13px;line-height:1.55;margin:0 0 12px}
.danger-button{color:#a42222}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;overflow-wrap:anywhere}
.pager{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.notification-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.notification-filter label{font-size:12px;font-weight:700}
.notification-filter select{min-height:40px;border:1px solid var(--dot-control-border);border-radius:var(--dot-radius-control);background:var(--dot-surface);color:var(--dot-text);font:400 14px var(--dot-font-ui);padding:0 10px}
.notification-item-actions form{display:inline}
.map-not-connected{border:1px dashed var(--dot-control-border);border-radius:12px;padding:14px;font-size:13px;color:var(--dot-text-muted);margin:0 0 12px}
.address-fields.coords{grid-template-columns:repeat(2,minmax(0,1fr))}
.address-field.full{grid-column:1/-1}
.address-form .address-field input,.address-form .address-field textarea,.company-fields input,.company-fields select,.stack-form textarea,.stack-form input[type=email],.stack-form input[type=tel]{min-height:44px;width:100%;box-sizing:border-box;border:1px solid var(--dot-control-border);border-radius:var(--dot-radius-control);background:var(--dot-surface);color:var(--dot-text);font:400 15px var(--dot-font-ui);padding:9px 13px}
.form-field input[type=email],.form-field input[type=tel],.form-field textarea{min-height:46px;width:100%;max-width:420px;border:1px solid var(--dot-control-border);border-radius:var(--dot-radius-control);background:var(--dot-surface);color:var(--dot-text);font:400 15px var(--dot-font-ui);padding:9px 13px;box-sizing:border-box}
:is(.address-field,.company-fields>div,.form-field) :is(input,select,textarea):focus-visible,summary:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--dot-red);outline-offset:2px}
.company-code{margin-top:14px;padding-top:14px;border-top:1px solid var(--dot-border)}
.company-authority{font-size:12px;color:var(--dot-text-muted);margin:10px 0}
.company-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.fin-field input{text-transform:uppercase;letter-spacing:.2em;max-width:200px}
.overview-data{margin-bottom:6px}
.footer-links a{color:var(--dot-text-muted)}
.journey-screen{max-width:640px;margin:0 auto;padding:28px 18px;flex:1}
.journey-card{padding:28px;margin-top:28px}
.journey-card h1{font-size:clamp(26px,5vw,36px);letter-spacing:-.04em;line-height:1.1;margin:8px 0 14px}
.journey-step{color:var(--dot-red)}
.journey-steps{font-size:13px;line-height:1.8;padding-left:20px;margin:0 0 18px}
.journey-invite{border:1px solid var(--dot-border);border-radius:14px;padding:14px 16px;margin:0 0 14px;background:var(--dot-bg)}
.journey-invite p{margin:0 0 8px}
body[data-page=journey],body[data-page=error],body[data-page=legal]{background:var(--dot-bg);color:var(--dot-text);min-height:100vh;display:flex;flex-direction:column}
.dot-error-status{font-size:64px;font-weight:700;letter-spacing:-.05em;margin:0}
.legal-document article{max-width:760px}
.account-copy-feedback.error{color:#a42222}
.identity-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin:16px 0}
.identity-slot form{display:grid;gap:8px;margin-top:10px}
.identity-slot input[type=file]{font-size:12px;max-width:100%}
@media(max-width:760px){
  .address-fields.coords{grid-template-columns:1fr}
  .notification-toolbar{flex-wrap:wrap}
  .confirm-body{max-width:100%}
}
.content>.card,.content>section.card,.content>form>.card{margin-bottom:18px}
.content .card>h2{font-size:18px;letter-spacing:-.02em;margin:0 0 12px}
.content .card>.field-hint,.content .card>p.field-hint{margin:0 0 14px}
.content .card .form-actions{flex-wrap:wrap;margin-top:6px}
.content .card .stack-form{margin-top:8px}
.row p time,.row-main p time{display:inline}
.session-actions{display:flex;flex-wrap:wrap;gap:10px}
.signed-out-screen{box-sizing:border-box;max-width:100%}

/* DOT-ID-APP-2R: reduced motion everywhere in the cabinet (DS tokens already set motion to 0 ms; this also covers
   the route loader, menus and any scrolling) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto!important}
}

/* DOT-ID-APP-2R2: state of the e-mail change operation (profile) — same palette as the form messages */
.status-note{border:1px solid var(--dot-border);background:var(--dot-surface);color:var(--dot-text);border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.55;margin:0 0 18px;max-width:720px}
.status-note.good{background:#e9f5ee;color:#205a39;border-color:#c7dbcd}
.status-note.warn{background:#fff7e6;color:#6b4a00;border-color:#ead39c}
.status-note.danger{background:#fff1f1;color:#a42222;border-color:#e3b4b4}
[data-dot-theme=dark] .status-note.good{background:#1c382b;color:#b9e9ca;border-color:#456552}
[data-dot-theme=dark] .status-note.warn{background:#3a3020;color:#f1d79a;border-color:#7a6436}
[data-dot-theme=dark] .status-note.danger{background:#3a2526;color:#f3b3b3;border-color:#966565}
.form-field input[disabled]{opacity:.6;cursor:not-allowed}
.button[disabled],.button:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.4)}

/* DOT-ID-APP-3: account deletion — banner with "Restore account" during the waiting period, obstacles */
.deletion-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-bottom: 24px; border-left-color: var(--color-warning, #b26b00); }
.deletion-banner p { margin: 0; flex: 1 1 320px; }
.deletion-banner form { margin: 0; }
.deletion-obstacles, .deletion-products { margin: 8px 0 16px; padding-left: 20px; }
.deletion-obstacles li, .deletion-products li { margin-bottom: 8px; }
.deletion-pending .form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.recovery-banner { margin-bottom: 24px; border-left-color: var(--color-warning, #b26b00); }
.recovery-banner p { margin: 0 0 8px; }
.recovery-banner form { margin-top: 8px; }

/* ---------------------------------------------------------------- DOT-ID-APP-5 (owner remarks on dotid-dev, 22.10.2026) */
/* remark 2: the product filter — label above its select, the button on the same base line as the select */
.notification-filter{align-items:end}
.notification-filter label{display:grid;gap:5px;min-width:170px;font-size:10px;font-weight:700;color:var(--dot-text-muted)}
.notification-filter select{min-height:44px;width:100%;font:600 12px var(--dot-font-ui)}
.notification-toolbar form .button,.notification-filter .button{min-height:44px}
.notification-toolbar>form{margin:0}
/* remark 3: the languages card — one field per row with its hint under the select; nothing floats */
.settings-languages{grid-template-columns:1fr;gap:16px}
.settings-languages .form-field{margin:0}
.settings-languages .form-field select{max-width:420px}
/* remark 5: the Save button stands apart from the last card */
.settings-actions{margin-top:22px;padding-top:4px}
/* remark 8: address form — the fields of one row share the top edge; hints and errors do not push the inputs */
.address-form .address-fields{align-items:start;gap:14px 18px;margin:0 0 14px}
.address-form .address-fields.details{grid-template-columns:repeat(3,minmax(0,1fr))}
.address-form .address-field{display:grid;gap:6px;align-content:start}
.address-form .address-field label:not(.address-check){margin:0}
.address-form .address-field .field-hint,.address-form .address-field .field-error{margin:0}
.address-form>.address-field,.address-form>.address-field.full{margin:0 0 14px}
.address-form .address-fields.coords{margin:4px 0 0}
/* remark 8: Google map (DOTID_MAP_PROVIDER=google) — the search box above the map, the map in the DS frame */
.address-map-wrap .address-map{cursor:default}
/* owner 27.10.2026 (phone): the map was too small — taller than the DS default (310 / 280 px), up to most of the screen,
   plus Google's full-screen control (cabinet-maps.js) to open it over the whole screen */
.address-map-wrap .address-map{height:clamp(380px,62vh,680px)}
@media(max-width:680px){.address-map-wrap .address-map{height:clamp(360px,62vh,640px)}}
.address-map-wrap .address-map:empty::before{content:attr(data-loading);position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--dot-text-muted)}
.map-search{display:grid;gap:6px;margin:0 0 12px}
.map-search label{font-size:12px;font-weight:650}
.map-search gmp-place-autocomplete{display:block;width:100%;min-height:46px;--gmpx-color-surface:var(--dot-surface);color-scheme:light}
/* owner 27.10.2026: Google's search box followed the phone's dark scheme on a light cabinet page — it follows the cabinet's theme */
[data-dot-theme=dark] .map-search gmp-place-autocomplete{color-scheme:dark}
.map-locate{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;padding:0 14px;min-height:40px;border:0;border-radius:999px;background:#fff;color:#1a1a1a;font:600 13px var(--dot-font-ui);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;max-width:calc(100% - 20px)}
.map-locate span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-locate:hover{background:#f3f3f2}
[data-dot-theme=dark] .map-locate{background:#2b2d30;color:#f0f0f0}[data-dot-theme=dark] .map-locate:hover{background:#35383b}
.map-note{font-size:11px;color:var(--dot-text-muted);margin:8px 0 0;text-align:right}
/* remark 9: company form — the form itself is the DS grid; VÖEN first. With the registry lookup the button is the LAST
   element of the form (Save stays the default submit) and is placed next to the VÖEN by grid areas. */
form.company-fields>.f-voen{grid-column:1/-1}
form.company-fields .f-voen input{max-width:260px}
form.company-fields>.company-actions{grid-column:1/-1;margin-top:4px}
.company-fields.with-lookup{grid-template-columns:minmax(0,260px) auto minmax(0,1fr);
  grid-template-areas:"voen lookup ." "name name name" "address address address" "email email email" "phone phone phone" "actions actions actions"}
.company-fields.with-lookup>.f-voen{grid-area:voen;grid-column:auto}
.company-fields.with-lookup>.f-name{grid-area:name}
.company-fields.with-lookup>.f-address{grid-area:address}
.company-fields.with-lookup>.f-email{grid-area:email}
.company-fields.with-lookup>.f-phone{grid-area:phone}
.company-fields.with-lookup>.f-actions{grid-area:actions}
.company-fields.with-lookup>.f-lookup{grid-area:lookup;align-self:start;justify-self:start;margin-top:24px;min-height:43px;width:auto}
.company-editor .status-note{margin:0 0 14px}
.lookup-note{font-size:12px;color:var(--dot-text-muted);margin:0 0 14px;line-height:1.5}
/* remark 10: profile — one card with the data; the fields open on "Edit details" */
.profile-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:21px}
.profile-actions .button{width:auto}
/* B-118 (owner 26.10.2026): the SMS code field sits right under the phone number, not above the whole form. The code form is a
   separate form (HTML forbids nesting), so the main form is "display:contents" and the parts are ordered in one column. */
.profile-edit{display:flex;flex-direction:column}
.profile-edit>form[action="/profile/edit"]{display:contents}
.profile-edit #names{order:1}.profile-edit #email-group{order:2}.profile-edit #phone-group{order:3}
.profile-edit>#phone-code{order:4}
.profile-edit>form[action="/profile/edit"]>.form-actions{order:5}.profile-edit>.edit-aside{order:6}
.profile-edit .form-field{margin:0 0 18px}
.profile-edit .edit-group{padding-top:18px;margin-top:4px;border-top:1px solid var(--dot-border)}
.profile-edit .edit-group:first-of-type{padding-top:0;border-top:0}
.profile-edit .edit-group h3{font-size:14px;margin:0 0 12px}
.profile-edit .edit-group>p.field-hint{margin:0 0 14px}
.profile-edit .edit-aside{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.profile-edit .edit-aside form{margin:0}
@media(max-width:760px){
  .address-form .address-fields.details{grid-template-columns:1fr}
  .company-fields.with-lookup{grid-template-columns:1fr;grid-template-areas:"voen" "lookup" "name" "address" "email" "phone" "actions"}
  .company-fields.with-lookup>.f-lookup{margin-top:0;width:100%;justify-self:stretch}
  form.company-fields .f-voen input{max-width:100%}
}
/* owner, 23.10.2026: the explanation of the DOT ID number right under the number (overview, profile) */
.detail-row .id-hint{display:block;margin-top:8px;font-size:12px;font-weight:400;line-height:1.5;color:var(--dot-text-muted)}
/* owner, 23.10.2026: quick names under "Address name"; the point line without coordinate fields */
.label-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.label-suggest .button.suggest{min-height:30px;padding:5px 11px;font-weight:600}
.map-point{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
.map-point .map-status{margin:0}
.map-point [hidden]{display:none}
/* owner, dev 23.10.2026: 'Consents' sat right under Save and wider than the other cards — the same spacing and width as
   the deletion card of the DS (.deletion-settings: margin-top 28px, max-width 720px) */
.consents-settings{margin-top:28px;max-width:720px}
/* owner, dev 23.10.2026: 'Back to the list' on the left above the address form */
.address-back{margin:20px 0 0}
.address-back + .address-head{margin-top:14px}
/* DOT-ID-APP-6: secret code and the document data card */
.secret-code-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:6px 0 8px}
.secret-code-value{font-size:24px;letter-spacing:.3em;font-variant-numeric:tabular-nums}
#document-data .detail-row form.inline-form{display:inline}
#document-data .doc-value{font-variant-numeric:tabular-nums}
/* owner, dev 23.10.2026: the activity filter (All / Actions / Security) is the DS segmented control (.notification-tabs
   of id-account.css styles <button> children); the cabinet uses links — same look: no own border or fill, the pressed
   one on the surface with the DS shadow */
.notification-tabs a.button{border:0;border-radius:7px;background:transparent;color:var(--dot-text-muted);min-height:0;padding:9px 13px;font:700 12px var(--dot-font-ui);box-shadow:none}
.notification-tabs a.button:hover{color:var(--dot-text)}
.notification-tabs a.button[aria-pressed=true]{background:var(--dot-surface);color:var(--dot-text);box-shadow:0 1px 4px #0001}

/* owner, dev 23.10.2026: the masked phone is tapped to show it in full — it looks like the text it is, no button */
.phone-reveal{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline dotted;text-decoration-color:var(--dot-text-muted);text-underline-offset:3px}
.phone-reveal:hover{text-decoration-color:var(--dot-text)}
.phone-reveal:focus-visible{outline:2px solid var(--dot-red);outline-offset:2px;border-radius:2px}

/* owner, dev 23.10.2026: a note followed by a card ("My subscriptions": .subscription-note has no margin in the DS; .callout a top margin only), so the
   card touched it; vertical margins collapse, so a callout already followed by a spaced block keeps its distance */
.callout,.subscription-note{margin-bottom:18px}
.callout:last-child,.subscription-note:last-child{margin-bottom:0}
/* the stand's test-mode note inside a card or a form group (settings → consents, profile → edit): the card's own paragraph
   rules reset its bottom margin, so the next field touched it */
main .test-mode-note:not(:last-child){margin-bottom:12px}

/* DOT-ID-ADMIN-1: search of the Administration Center — one row: field + button (DS .admin-toolbar is a filter grid) */
.admin-toolbar.console-search{display:flex;flex-wrap:wrap;align-items:center;gap:10px;grid-template-columns:none;max-width:760px;margin:0 0 14px}
.admin-toolbar.console-search label{flex-basis:100%;margin:0;font-weight:700;font-size:12px}
.admin-toolbar.console-search input{flex:1 1 260px;min-width:0}
.admin-toolbar.console-search .button{flex:0 0 auto;width:auto;min-width:120px}

/* owner, dev 23.10.2026 (agreed): the sidebar mark DOT / ID is 120 px wide on every screen above a phone — the DS's own
   compact step (id-account.css: 152 px desktop, 135 px ≤1050, 120 px ≤760; 112 / 100 px on the smallest phones stay).
   A deliberate deviation from the reference size; the reference itself is to be updated in the DS package (B-84). */
@media (min-width: 391px) { .sidebar-logo img { width: 120px } }

/* owner, dev 24.10.2026: a status badge that is the first element of a row value (e-mail, security, identity) was grey —
   the DS rule ".detail-row span:first-child" (the row's label) caught it too. The badge keeps its own DS colours
   (id-account.css .status.good / .warn, light and dark), the same as the phone's badge that follows the number. */
.detail-row .status.good{color:#205a39}
.detail-row .status.warn{color:#805218}
[data-dot-theme=dark] .detail-row .status.good{color:#b9e9ca}
[data-dot-theme=dark] .detail-row .status.warn{color:#f3d19a}
/* the masked phone (and FIN / document number) is the first element of the tap button — the same DS rule made it grey */
.detail-row .phone-reveal span:first-child{color:inherit}

/* Owner 24.10.2026: documents of the company checks — a drop zone instead of the browser's bare file button (DS 1.0.8 has
   no upload component: built from its tokens — control border, radius, surface, muted text, red focus/accent tint). */
.check-card h3{margin:22px 0 6px;font-size:15px}
.check-card .stack-form{margin-top:18px}
.check-card form+form{margin-top:14px}
.check-card .stack-form>button[type=submit],.check-card form>button[type=submit]{justify-self:start;width:auto;min-width:180px}
.dropzone{display:grid;gap:10px}
.dropzone-ready .dropzone-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dropzone-area{display:none}
.dropzone-ready .dropzone-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:132px;padding:22px 18px;
  border:1.5px dashed var(--dot-control-border);border-radius:var(--dot-radius-card);background:var(--dot-bg);color:var(--dot-text);text-align:center;cursor:pointer;
  transition:border-color var(--dot-motion-fast,.15s) ease,background-color var(--dot-motion-fast,.15s) ease}
.dropzone-ready .dropzone-area:hover,.dropzone.is-dragover .dropzone-area{border-color:var(--dot-red);background:var(--dot-accent-tint)}
.dropzone-input:focus-visible+.dropzone-area{outline:2px solid var(--dot-red);outline-offset:2px}
.dropzone-icon{color:var(--dot-text-muted)}
.dropzone.is-dragover .dropzone-icon{color:var(--dot-red)}
.dropzone-title{font-size:14px;font-weight:600;line-height:1.45}
.dropzone-pick{color:var(--dot-red);text-decoration:underline;text-underline-offset:3px}
.dropzone-hint{font-size:12px;color:var(--dot-text-muted)}
.dropzone-has-file .dropzone-area{display:none}
.dropzone-file{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border:1px solid var(--dot-border);border-radius:var(--dot-radius-control);background:var(--dot-surface);min-width:0}
.dropzone-file svg{flex:none;color:var(--dot-text-muted)}
.dropzone-file-name{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropzone-file-size{flex:none;font-size:12px;color:var(--dot-text-muted);font-variant-numeric:tabular-nums}
.dropzone-file[hidden]{display:none}
.dropzone-remove{flex:none;padding:4px 2px;border:0;background:none;color:var(--dot-text);font:600 13px var(--dot-font-ui);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dropzone-remove:hover{color:var(--dot-red)}
.dropzone-error{margin:0;font-size:13px;color:var(--dot-red)}
@media (max-width:390px){.dropzone-ready .dropzone-area{min-height:112px;padding:18px 12px}}
@media (prefers-reduced-motion:reduce){.dropzone-ready .dropzone-area{transition:none}}
@media (max-width:760px){.check-card .stack-form>button[type=submit],.check-card form>button[type=submit]{justify-self:stretch;width:100%}}
/* owner 24.10.2026: the DS logo motion (catalog item `motion`, reference/index.html) for all projects. The approved SVG is
   inline (dotlib/brandmark.py) — its sizes are those of the <img> it replaces: */
.sidebar-logo svg.dot-logo{display:block;width:120px;height:auto}
@media (max-width:390px){.sidebar-logo svg.dot-logo{width:112px}}
@media (max-width:360px){.sidebar-logo svg.dot-logo{width:100px}}
/* owner 24.10.2026: DOT / SysAdmin in the admin (central panel of all projects). The DS sizes a composition by the
   height of its 102-unit SVG; the 235 px sidebar fits it at 26 px, the phone header at the DS mobile height (24 px) */
.admin-center-logo svg.dot-logo{display:block;width:auto;height:26px;max-width:none;flex:none}
.admin-mobile-logo .admin-center-logo svg.dot-logo{height:24px}
.signed-out-top>img.admin-mark{width:auto;height:30px}
[data-dot-theme=dark] .signed-out-top>img.admin-mark{content:url('/ds/brand-assets/logos/dot-sysadmin-dark.svg')}
.admin-sidebar .sidebar-bottom{margin:auto 12px 0}
/* DOT / project: on hover the slash and the project name flash red (0.54 s, ease-out, red from 32 % to 78 %);
   DOT alone: the red O pulses (0.5 s). Mouse only (DS: pointerType mouse); never with reduced motion. */
.dot-logo .dot-logo-o{transform-box:fill-box;transform-origin:center}
@keyframes dot-logo-signal{32%,78%{fill:#f00}}
@keyframes dot-logo-pulse{0%,100%{transform:scale(1)}36%{transform:scale(.81,1.08)}70%{transform:scale(1.05,.97)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  a:hover .dot-logo-project .dot-logo-slash,a:hover .dot-logo-project .dot-logo-name,
  .dot-logo-project:hover .dot-logo-slash,.dot-logo-project:hover .dot-logo-name{animation:dot-logo-signal .54s ease-out}
  a:hover .dot-logo-plain .dot-logo-o,.dot-logo-plain:hover .dot-logo-o{animation:dot-logo-pulse .5s cubic-bezier(.22,.9,.25,1)}
}
/* COMPANY-REMOVE (owner 24.10.2026): removed companies, restorable for 30 days */
.removed-companies{list-style:none;margin:12px 0 0;padding:0 18px}
.removed-company{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--dot-border);min-width:0}
.removed-company:first-child{border-top:0}
.removed-company>div{min-width:0}
.removed-company strong{display:block;font-size:15px;overflow-wrap:anywhere}
.removed-company span{display:block;margin-top:3px;font-size:12px;color:var(--dot-text-muted)}
.removed-company form{flex:none}
@media (max-width:520px){.removed-company{flex-wrap:wrap}.removed-company form,.removed-company form .button{width:100%}}
/* DOT-ID-ADMIN-2: actions on the user card and the check decision of the Administration Center (one form = one confirmation) */
.admin-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.admin-actions .confirm-action{display:block;flex:1 1 280px;max-width:420px}
.admin-actions .confirm-action>summary{margin:0}
.admin-actions .confirm-body{max-width:none}
.admin-actions .stack-form select,.review-decision .stack-form select{width:100%}
.admin-actions .stack-form textarea,.review-decision .stack-form textarea{width:100%;min-height:64px}
#action-outcome{margin:0 0 16px}
@media(max-width:760px){.admin-actions .confirm-action{flex-basis:100%;max-width:none}}
/* DOT-ID-ADMIN-3: templates — the three languages side by side, one under another on a phone */
.template-langs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.template-lang h2{font-size:15px;margin:0 0 10px;display:flex;gap:8px;align-items:center}
.template-lang .stack-form input,.template-lang .stack-form textarea{width:100%}
.template-lang .stack-form textarea{min-height:96px}
.template-lang .inline-form{margin-top:8px}
.template-lang>.field-hint{margin-top:12px;overflow-wrap:anywhere}
@media(max-width:1050px){.template-langs{grid-template-columns:minmax(0,1fr)}}
.template-tabs{display:flex;gap:10px;align-items:center;font-size:13px}
.template-blocks{display:grid;gap:12px;max-width:760px;margin:0 0 24px}
.template-block .stack-form textarea{width:100%}
.template-block .inline-form{margin-top:8px}

/* Owner 24.10.2026 (iPhone): the check badge squeezed the company name into several lines. The width of the CARD decides
   (container query, not the screen): in a narrow card the badge moves under the name, aligned with the text, and the name
   keeps the whole width; in a wide card the badge stays beside the name. */
.company-record{container-type:inline-size}
@container (max-width:560px){
  .company-record-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:10px;align-items:center}
  .company-record-head .company-mark{grid-row:1 / span 2;align-self:start}
  .company-record-head .company-copy{min-width:0}
  .company-record-head .status{grid-column:2;justify-self:start;margin-left:0;white-space:normal}   /* the DS phone rule adds 58 px */
}

/* owner 24.10.2026: version / build line (cabinet/buildinfo.py) — sidebar bottom on a desktop; the DS hides the sidebar
   bottom on a phone, so there the same line stands in the footer under the copyright */
.sidebar-bottom .stand-note,.sidebar-bottom .build-line{display:block}
.sidebar-bottom .stand-note + .build-line{margin-top:6px}
.sidebar-bottom .build-line{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.footer-build{display:none}
@media(max-width:760px){.footer-build{display:block;margin-top:6px;font-variant-numeric:tabular-nums}}

/* owner 25.10.2026 (admin-dev): the user's actions stand in the head of the user card, right of the name — no separate
   "Actions" card. A confirmation form (block, unblock, end sessions) opens as a panel under its button; on a phone the
   buttons go under the name and the panel takes the full width. */
.admin-user-card-top .admin-user-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;margin-left:auto}
.admin-user-actions .confirm-action{flex:none;max-width:none;display:inline-block;position:relative}
.admin-user-actions .admin-action-edit{margin:0}
.admin-user-actions .confirm-body{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(380px,calc(100vw - 48px));margin:0;
  box-shadow:0 14px 34px rgba(23,24,26,.14)}
.admin-user-actions #actions-why{margin:0;max-width:340px;text-align:right}
@media(max-width:760px){
  .admin-user-card-top .admin-user-actions{width:100%;justify-content:flex-start;margin-left:0}
  .admin-user-actions .confirm-action{position:static;flex-basis:auto}
  .admin-user-actions .confirm-action[open]{flex-basis:100%}
  .admin-user-actions .confirm-body{position:static;width:auto;margin-top:10px;box-shadow:none}
  .admin-user-actions #actions-why{text-align:left}
}

/* owner 25.10.2026 ("like Bitrix"): the user table with chosen columns and the user groups. The table and the tabs are the
   DS components .dot-table / .dot-tabs (ui/dot-ui.css 1.0.8 — its rules repeated here, the file itself sets global
   button / body styles and is not loaded by the admin); the scroll stays inside the table, never the page. */
.dot-table-wrap{position:relative;overflow-x:auto;border:1px solid var(--dot-border);border-radius:var(--dot-radius-card);background:var(--dot-surface);max-width:100%}
.dot-table{width:100%;border-collapse:collapse;text-align:left;min-width:550px}
.dot-table th,.dot-table td{padding:15px 18px;border-bottom:1px solid var(--dot-border);font-size:13px}
.dot-table tr:last-child td{border-bottom:0}
.dot-table th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dot-text-muted)}
.dot-table td:last-child{text-align:right}
.dot-table tbody tr:hover{background:var(--dot-accent-tint)}
.admin-table th,.admin-table td{padding:11px 14px;vertical-align:top;white-space:nowrap}
.admin-table th a{color:inherit;text-decoration:none}.admin-table th a:hover{color:var(--dot-text)}
.admin-table th[aria-sort]{color:var(--dot-text)}
.admin-table td small{display:block;white-space:normal;max-width:320px;margin-top:4px}
.admin-table .table-open a{font-weight:700;text-decoration:none}
.table-filters select{flex:0 0 auto;min-height:44px;border:1px solid var(--dot-control-border);border-radius:9px;background:var(--dot-surface);color:var(--dot-text);padding:9px 12px;font:600 12px var(--dot-font-ui)}
.table-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.table-head .admin-count{margin:0}
.table-columns{position:relative}
.table-columns>summary{list-style:none;cursor:pointer;width:auto}.table-columns>summary::-webkit-details-marker{display:none}
.table-columns-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(460px,calc(100vw - 36px));padding:18px;
  background:var(--dot-surface);border:1px solid var(--dot-border);border-radius:var(--dot-radius-card);box-shadow:0 16px 55px #0002}
.table-columns-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:10px 0 16px}
.table-columns-grid .check-row{font-size:12px;margin:0}
.table-pager{display:flex;gap:10px;justify-content:flex-end;margin:14px 0}
.group-tabs{margin:6px 0 22px}
.dot-tabs{display:flex;gap:24px;border-bottom:1px solid var(--dot-border);overflow-x:auto}
.dot-tab{white-space:nowrap;padding:12px 2px;border:0;border-bottom:2px solid transparent;background:none;color:var(--dot-text-muted);font-weight:650;font-size:14px;text-decoration:none}
.dot-tab:hover{color:var(--dot-text)}
.dot-tab[aria-current=page]{color:var(--dot-text);border-bottom-color:var(--dot-red)}
.group-security,.group-params{max-width:720px}
.group-security .stack-form select{width:100%}
@media(max-width:600px){.table-columns-panel{position:fixed;left:18px;right:18px;top:auto;width:auto}.table-columns-grid{grid-template-columns:1fr}
  .table-head{align-items:flex-start}}

/* owner 25.10.2026: phone field with "country and phone code" — DS ui/id-journey.css .phone-input (rules repeated here:
   id-journey.css is not loaded by the cabinet); the input of the cabinet keeps its own height */
.phone-input{display:flex;align-items:center;width:100%;max-width:420px;box-sizing:border-box;border:1px solid var(--dot-control-border);
  border-radius:var(--dot-radius-control);overflow:hidden;background:var(--dot-surface)}
.phone-input>span{flex:none;align-self:stretch;display:flex;align-items:center;padding:0 12px;border-right:1px solid var(--dot-border);
  font-size:15px;font-variant-numeric:tabular-nums}
.form-field .phone-input input[type=tel]{border:0;border-radius:0;min-width:0;flex:1;width:auto;max-width:none;outline:none}
.phone-input input:focus,.phone-input input:focus-visible{box-shadow:none;outline:none}
.phone-input:focus-within{outline:2px solid var(--dot-red);outline-offset:2px}
.phone-input:has(input[aria-invalid=true]){border-color:#bb2525}
.phone-field select{width:100%}
[data-dot-theme=dark] .phone-input{border-color:#777d82}
[data-dot-theme=dark] .phone-input>span{border-color:#55595c}
/* PAYMENTS-1 (owner 25.10.2026): payment systems in the Administration Center and the provider choice in the cabinet */
.form-field input[type=number]{min-height:46px;width:100%;max-width:420px;border:1px solid var(--dot-control-border);border-radius:var(--dot-radius-control);background:var(--dot-surface);color:var(--dot-text);font:400 15px var(--dot-font-ui);padding:9px 13px;box-sizing:border-box}
.pay-providers{display:grid;gap:16px;margin:0 0 16px}
.pay-providers .card{margin:0}
.pay-provider-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pay-provider-head h2{font-size:21px;margin:0}
.pay-problems{margin:10px 0 14px;padding-left:18px;font-size:13px;line-height:1.6;color:var(--dot-text-muted)}
.pay-ready{font-size:13px;color:var(--dot-text-muted);margin:10px 0 14px}
#pay-switch .inline-form{margin:4px 8px 4px 0}
.pay-choose{gap:8px;align-items:center;flex-wrap:wrap}
.pay-choose label{font-size:12px;font-weight:600}
.pay-choose select{min-height:40px;border:1px solid var(--dot-control-border);border-radius:var(--dot-radius-control);background:var(--dot-surface);color:var(--dot-text);font:400 14px var(--dot-font-ui);padding:0 10px}
.billing-heading #pay-check-note{flex-basis:100%;margin:0}

/* SERVERS-2 — the live health panel of a server */
.sv-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:26px 0 4px}
.sv-title{font-size:19px;margin:28px 0 10px}
.sv-head .sv-title{margin:0}
.sv-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px}
.sv-controls label{display:flex;align-items:center;gap:6px}
.sv-controls input[type=number]{width:64px;min-height:36px;padding:4px 8px;border:1px solid var(--dot-control-border);border-radius:8px;background:var(--dot-surface);color:var(--dot-text);font:inherit}
.sv-controls input[type=checkbox]{width:16px;height:16px;accent-color:var(--dot-red,#f00)}
.sv-controls .button{min-height:36px;padding:6px 14px}
.sv-controls .error{color:var(--dot-red,#c00)}
.sv-updated{margin:8px 0 14px}
.sv-tiles.admin-stats{margin:14px 0 18px}
.sv-tiles .admin-stat strong{font-size:28px}
.sv-tiles .pay-problems{margin:6px 0 0;padding-left:18px;font-size:12px}
.sv-card{margin:0 0 16px}
.sv-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sv-card-head h2{margin:0;font-size:17px}
.sv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px 22px;margin:4px 0 8px}
.sv-metric{display:grid;gap:4px;align-content:start}
.sv-metric-label{font-size:11px;color:var(--dot-text-muted)}
.sv-metric strong{font-size:18px;letter-spacing:-.02em}
.sv-bar{display:block;width:100%;height:5px;margin-top:4px;border-radius:3px;overflow:hidden}
.sv-bar-track{fill:var(--dot-border,#e3e4e4)}.sv-bar-fill{fill:var(--dot-red,#f00)}
.sv-bar-warn .sv-bar-fill{fill:#c98a1b}.sv-bar-bad .sv-bar-fill{fill:#b52727}
.sv-bar-pct{font-size:10px;color:var(--dot-text-muted);text-align:right}
.sv-source{margin-top:12px;font-size:11px;color:var(--dot-text-muted)}
.sv-source summary{cursor:pointer}
.sv-source p{margin:8px 0 0;line-height:1.6}
.sv-sparks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.sv-spark{display:grid;gap:6px}
.sv-spark svg{width:100%;height:60px;display:block;border-bottom:1px solid var(--dot-border,#e3e4e4)}
.sv-spark polyline{fill:none;stroke:var(--dot-red,#f00);stroke-width:1.5;vector-effect:non-scaling-stroke}
@media(max-width:760px){.sv-tiles.admin-stats{grid-template-columns:1fr}.sv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ADMIN-TIPS — a small «i» with the explanation on hover / focus / tap (owner 27.10.2026) */
.info-tip{position:relative;display:inline-flex;vertical-align:middle;margin:0 2px}
.info-tip-btn{width:16px;height:16px;min-height:0;padding:0;border:1px solid var(--dot-text-muted,#6d7177);border-radius:50%;background:transparent;color:var(--dot-text-muted,#6d7177);font:600 10px/1 var(--dot-font-ui,system-ui,sans-serif);font-style:italic;cursor:help;display:inline-grid;place-items:center}
.info-tip-btn:hover,.info-tip-btn:focus-visible,.info-tip-btn[aria-expanded=true]{color:var(--dot-text);border-color:var(--dot-text)}
.info-tip-text{position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:max-content;max-width:min(360px,80vw);padding:10px 12px;border:1px solid var(--dot-border,#e3e4e4);border-radius:10px;background:var(--dot-surface,#fff);color:var(--dot-text);box-shadow:0 12px 32px #0002;font:400 12px/1.6 var(--dot-font-ui,system-ui,sans-serif);text-align:left;white-space:normal;display:none}
.info-tip:hover .info-tip-text,.info-tip:focus-within .info-tip-text,.info-tip-btn[aria-expanded=true]+.info-tip-text{display:block}
.admin-scope-note{margin:28px 0 0;display:flex;align-items:center;gap:8px}
.admin-scope-note .info-tip-text{top:auto;bottom:calc(100% + 8px)}
h1 .info-tip,h2 .info-tip{vertical-align:middle}
.admin-h1 .info-tip-text{font-weight:400;letter-spacing:0}