/* Buttons: five roles, one rule set (COMPONENTS.md).

     primary      Carbon, light label, Lime interior corner. Advances the task.
     accent       Lime, Carbon label, Carbon corner. A deliberate focal decision;
                  at most one per view.
     secondary    Neutral outline. A supporting decision. No corner.
     quiet        Text action with a full 44 px target. No corner.
     destructive  Error outline and label, followed by a confirmation.

   Every role list below names its members explicitly: the new components
   (.nd-btn--*, .button, .app-button, .header-button) and the live site's and
   portal's classes on the reskinned pages, so a live button takes a role
   without its markup changing. The portal's .btn means "primary" there but is
   only the base class on the site, hence [data-surface=portal].
   action-corner.js adds the corner to the primary and accent members only and
   uses the same lists (keep them in step).

   Colours come from tokens.css (--btn-*), which a dark surface (.nd-dark)
   swaps, so a primary action on Carbon turns Lime instead of disappearing. */

/* ---- membership ------------------------------------------------------ */
:is(.nd-btn--primary,.button,.header-portal,.mobile-nav .portal,.app-button.primary,.app-button.dark,
    .btn--order:not(.signup-gate__btn),.btn--primary,.btn--accent,.howto-hero__btn--primary,.btn-trust--primary,.terms-hero__cta-btn,.howto-help__btn,
    .howto-cta__btn:not(.howto-cta__btn--ghost):not(.howto-cta__btn--quick),
    [data-surface=portal] .btn:not(.secondary):not(.danger),.topbar .cta){
  --b-bg:var(--btn-primary-bg); --b-fg:var(--btn-primary-fg); --b-border:var(--btn-primary-border);
  --b-hover-bg:var(--btn-primary-hover-bg); --b-hover-border:var(--btn-primary-border);
  --b-cell:var(--btn-primary-cell); --b-arrow-hover:var(--btn-primary-arrow-hover);
}
:is(.nd-btn--accent,.purchase-button,.app-button.accent){
  --b-bg:var(--btn-accent-bg); --b-fg:var(--btn-accent-fg); --b-border:var(--btn-accent-border);
  --b-hover-bg:var(--btn-accent-hover-bg); --b-hover-border:var(--btn-accent-border);
  --b-cell:var(--btn-accent-cell); --b-arrow-hover:var(--btn-accent-arrow-hover);
}
:is(.nd-btn--secondary,.app-button:not(.primary):not(.dark):not(.accent):not(.mon-danger),
    .header-button:not(.header-portal):not(.portal):not(.purchase-button),
    .btn--ghost,.btn--outline,.btn--secondary,.btn--preview,.howto-hero__btn--ghost,.howto-cta__btn--ghost,.howto-cta__btn--quick,
    .btn-trust:not(.btn-trust--primary),.support-still__btn,.signup-gate__btn,
    [data-surface=portal] .btn.secondary,.btn-social,.copy-btn){
  --b-bg:var(--btn-secondary-bg); --b-fg:var(--btn-secondary-fg); --b-border:var(--btn-secondary-border);
  --b-hover-bg:var(--btn-secondary-hover-bg); --b-hover-border:var(--btn-secondary-hover-border);
}
:is(.nd-btn--quiet,.link-btn){
  --b-bg:transparent; --b-fg:var(--fg); --b-border:transparent; --b-hover-bg:transparent; --b-hover-border:transparent;
}
:is(.nd-btn--destructive,[data-surface=portal] .btn.danger,.app-button.mon-danger){
  --b-bg:transparent; --b-fg:var(--btn-destructive-fg); --b-border:var(--btn-destructive-border);
  --b-hover-bg:var(--btn-destructive-hover-bg); --b-hover-border:var(--btn-destructive-border);
}

/* ---- shape (all roles) ----------------------------------------------- */
/* Box and flow at zero specificity, so a component can still hide a button
   or make it full width (.header-portal on phones, page-mode Order). */
:where(.nd-btn,.button,.app-button,.header-button,.btn,.btn-social,.copy-btn,.link-btn,
    .howto-hero__btn,.howto-cta__btn,.howto-help__btn,.btn-trust,.terms-hero__cta-btn,.support-still__btn,.topbar .cta){
  position:relative; display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:var(--s3);
}
:is(.nd-btn,.button,.app-button,.header-button,.btn,.btn-social,.copy-btn,.link-btn,
    .howto-hero__btn,.howto-cta__btn,.howto-help__btn,.btn-trust,.terms-hero__cta-btn,.support-still__btn,.topbar .cta){
  /* padding-block keeps a button with the 24 px corner at the same 48 px */
  min-height:var(--control-size); padding:calc((var(--control-size) - 2 * var(--rule) - var(--corner-size)) / 2) var(--s6); box-sizing:border-box;
  background:var(--b-bg,transparent); color:var(--b-fg,var(--fg)); border:var(--rule) solid var(--b-border,var(--control-rule));
  border-radius:var(--radius-control); box-shadow:none; transform:none;
  font-family:var(--font-body); font-size:var(--text-control); font-weight:500; line-height:var(--lh-control);
  letter-spacing:0; text-transform:none; text-decoration:none; text-align:center; cursor:pointer;
  transition:background var(--time-hover) var(--ease),border-color var(--time-hover) var(--ease);
}
/* Navigation, table rows, chips of actions: 44 px and the label size. */
:is(.header-button:not(.purchase-button),.btn--sm,[data-surface=portal] .btn.sm,.copy-btn,.portal-row-actions .app-button){
  min-height:var(--control-size-sm); padding:calc((var(--control-size-sm) - 2 * var(--rule) - var(--corner-size)) / 2) var(--s4); font-size:var(--text-label); white-space:nowrap;
}
:is(.nd-btn--quiet,.link-btn){padding-inline:var(--s2); text-decoration:underline; text-decoration-color:var(--link-mark);
  text-decoration-thickness:2px; text-underline-offset:var(--s1); min-height:var(--touch-min)}
/* A link button inside a sentence ("Finish your billing profile to ...", "Tell us",
   "Send the activation email again") reads as a link in that sentence: no box,
   the sentence's own size. Inline links are exempt from the target size. */
:is(p:not(.center-row),.msg) > .link-btn{display:inline;min-height:0;padding:0;border:0;font:inherit;font-weight:500;vertical-align:baseline;
  color:var(--carbon);text-decoration:underline;text-decoration-color:var(--link-mark);text-decoration-thickness:2px;text-underline-offset:3px}

@media(hover:hover){
  :is(.nd-btn,.button,.app-button,.header-button,.btn,.btn-social,.copy-btn,.link-btn,
      .howto-hero__btn,.howto-cta__btn,.howto-help__btn,.btn-trust,.terms-hero__cta-btn,.support-still__btn,.topbar .cta):hover:not(:disabled):not([aria-disabled=true]){
    background:var(--b-hover-bg,transparent); border-color:var(--b-hover-border,var(--carbon)); color:var(--b-fg,var(--fg)); transform:none;
  }
  :is(.nd-btn--quiet,.link-btn):hover{text-decoration-thickness:3px}
}
:is(.nd-btn,.button,.app-button,.header-button,.btn,.btn-social,.copy-btn,.link-btn,
    .howto-hero__btn,.howto-cta__btn,.howto-help__btn,.btn-trust,.terms-hero__cta-btn,.support-still__btn,.topbar .cta):focus-visible{
  outline:3px solid var(--focus-color); outline-offset:var(--focus-offset);
}
/* Disabled: readable Carbon label on Selection, no animation (DESIGN.md).
   The order button's Lime price pill goes quiet too. */
:is(.nd-btn,.button,.app-button,.header-button,.btn,.btn-social,.copy-btn,.link-btn,
    .howto-hero__btn,.howto-cta__btn,.howto-help__btn,.btn-trust,.terms-hero__cta-btn,.support-still__btn,.topbar .cta):is(:disabled,[aria-disabled=true]){
  --b-cell:var(--btn-disabled-cell);
  background:var(--btn-disabled-bg); color:var(--btn-disabled-fg); border-color:var(--btn-disabled-border); opacity:1; cursor:not-allowed;
}
:is(.app-button,.btn)[aria-busy=true]{cursor:progress}
:is(.btn,.nd-btn):is(:disabled,[aria-disabled=true]) .btn__price-pill{background:transparent;box-shadow:inset 0 0 0 var(--rule) var(--border)}

/* One icon set: a primary or accent action shows the corner and nothing else
   (the live pages carried their own arrows). */
:is(.nd-btn--primary,.nd-btn--accent,.btn--order:not(.signup-gate__btn),.btn--primary,.btn--accent,.howto-hero__btn--primary,.btn-trust--primary,
    .terms-hero__cta-btn,.howto-help__btn,.howto-cta__btn:not(.howto-cta__btn--ghost):not(.howto-cta__btn--quick),
    [data-surface=portal] .btn:not(.secondary):not(.danger),.purchase-button,.app-button.primary,.app-button.dark,.app-button.accent) > svg:not(.action-corner){display:none}
:is(.btn--order,.btn--primary,.btn--accent,.btn--ghost,.btn--outline,.btn--preview)::after{content:none}
/* Secondary, quiet and destructive actions never carry the corner. */
:is(.nd-btn--secondary,.nd-btn--quiet,.nd-btn--destructive,.app-button:not(.primary):not(.dark):not(.accent),
    .header-button:not(.header-portal):not(.portal):not(.purchase-button),.btn--ghost,.btn--outline,.btn--secondary,.btn--preview,
    .signup-gate__btn,[data-surface=portal] .btn.secondary,[data-surface=portal] .btn.danger,.link-btn) > .action-corner{display:none}

/* ---- the arrow corner -------------------------------------------------- */
.action-corner{width:var(--corner-size); height:var(--corner-size); overflow:visible; flex:none}
.action-corner .cell{fill:var(--b-cell,var(--lime)); transform:scale(var(--corner-rest)); transform-box:view-box; transform-origin:0% 100%;
  transition:transform var(--time-exit) var(--ease)}
.action-corner .arrow{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke var(--time-exit) var(--ease)}
@keyframes nd-corner-pulse{from{transform:scale(var(--corner-hover))}to{transform:scale(var(--corner-pulse))}}
@media(hover:hover){
  :hover:not(:disabled):not([aria-disabled=true]) > .action-corner .cell{transform:scale(var(--corner-hover)); transition-duration:var(--time-enter);
    animation:nd-corner-pulse var(--time-pulse) ease-in-out var(--time-enter) infinite alternate}
  :hover:not(:disabled):not([aria-disabled=true]) > .action-corner .arrow{stroke:var(--b-arrow-hover,var(--carbon)); transition-duration:var(--time-enter)}
}
/* Reduced motion: the enlarged corner without transition or pulse. */
@media(prefers-reduced-motion:reduce){
  .action-corner .cell,.action-corner .arrow,
  :hover:not(:disabled):not([aria-disabled=true]) > .action-corner .cell,
  :hover:not(:disabled):not([aria-disabled=true]) > .action-corner .arrow{transition:none; animation:none}
}

/* ---- controls shared by the live site and portal ----------------------- */
/* Compact shared tree. Full labels wrap; controls do not consume the text column. */
.industry-tree-wrap{max-height:240px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:var(--s1) 0;mask-image:none;-webkit-mask-image:none}
.industry-tree{font-size:13px;line-height:1.4}
.industry-tree ul{padding-left:var(--s3)}
.industry-tree>ul{padding-left:var(--s1)}
.industry-tree .node-row{display:flex;align-items:flex-start;min-height:28px;padding:2px var(--s1);gap:2px;border-radius:var(--radius-control)}
.industry-tree .toggle{width:24px;height:24px;margin:0;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:9px;color:var(--muted);cursor:pointer;border-radius:var(--radius-control)}
.industry-tree .toggle.leaf{visibility:hidden}
.industry-tree input[type=checkbox]{appearance:none;-webkit-appearance:none;width:24px;height:24px;min-height:0;margin:0;padding:0;flex:none;
  border:0;border-radius:var(--radius-control);background:var(--check-off) center/16px 16px no-repeat;cursor:pointer}
.industry-tree input[type=checkbox]:checked{background-image:var(--check-on)}
.industry-tree input[type=checkbox]:indeterminate{background-image:var(--check-mixed)}
@media(hover:hover){.industry-tree input[type=checkbox]:not(:checked):not(:indeterminate):hover{background-image:var(--check-hover)}
  .industry-tree .node-row:hover{background:var(--selection)}}
.industry-tree input[type=checkbox]:focus-visible,.industry-tree .toggle:focus-visible{outline:2px solid var(--focus-color);outline-offset:-2px}
.industry-tree .node-label{display:block;flex:1;min-width:0;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;line-height:1.4;padding:3px 0;cursor:pointer}
.industry-tree .node-kood{font-size:12px;font-variant-numeric:tabular-nums}
.industry-tree .node-text{font-size:inherit}
/* Touch: the arrow stays narrow because tapping the name also opens a branch
   (app.js); the checkbox keeps a 32 px target. The name starts 56 px in, so
   most section names fit on one line of a phone-width tree. */
@media(pointer:coarse){
  .industry-tree .node-row{min-height:36px;gap:0}
  .industry-tree .toggle{width:20px;height:32px}
  .industry-tree input[type=checkbox]{width:32px;height:32px;background-size:18px 18px}
  .industry-tree .node-label{padding-block:6px;font-size:14px;line-height:1.45}
}
/* Other checkboxes and radios stay native, Carbon, 20 px, inside their label. */
:is(.checkbox-grid__item,.chk-list__item,.toggle-switch,label) > input:is([type=checkbox],[type=radio]){accent-color:var(--carbon)}

/* ---- the live cookie-consent banner and settings dialog -------------------
   (live css/cookie-consent.css + js/cookie-consent.js, site and portal). Its
   colours came from the old theme's variables, which the pages built anew do
   not define (the Accept button was white on nothing). Hierarchy as live:
   Accept is the primary action, Reject an equal-size outlined button, Manage a
   text action. */
.cc-banner.cc-banner{background:var(--surface);color:var(--carbon);border-top:var(--rule) solid var(--border);box-shadow:var(--shadow-overlay);font-family:var(--font-body)}
/* cookie-consent.css spaces the bar with --space-* from the old style.css, which
   the homepages do not load: there the bar had no padding and no button gaps. */
@media(min-width:768px){.cc-banner.cc-banner{padding:var(--s6) var(--s8)}.cc-banner .cc-banner__inner{gap:var(--s6)}.cc-banner .cc-banner__title{margin-bottom:var(--s1)}.cc-banner .cc-banner__actions{gap:var(--s2)}}
.cc-banner .cc-banner__title,.cc-modal .cc-modal__title{font:500 var(--text-body)/1.4 var(--font-body);color:var(--carbon);text-transform:none;letter-spacing:0}
.cc-banner .cc-banner__desc,.cc-modal .cc-modal__desc,.cc-modal .cc-category__desc{color:var(--muted);font-size:var(--text-label);line-height:var(--lh-label)}
.cc-modal .cc-category__name{color:var(--carbon);font-weight:500}
:is(.cc-banner,.cc-modal) :is(a,a:link,a:visited){color:var(--carbon);text-decoration:underline;text-decoration-color:var(--verdite);text-decoration-thickness:2px;text-underline-offset:3px}
:is(.cc-banner,.cc-modal) .cc-btn{min-height:var(--touch-min);padding:var(--s2) var(--s4);border-radius:var(--radius-control);font:500 var(--text-label)/1.25 var(--font-body);
  text-transform:none;letter-spacing:0;box-shadow:none;transform:none}
:is(.cc-banner,.cc-modal) .cc-btn--accept{background:var(--carbon);color:var(--surface);border:var(--rule) solid var(--carbon)}
:is(.cc-banner,.cc-modal) .cc-btn--reject{background:transparent;color:var(--carbon);border:var(--rule) solid var(--control-rule)}
:is(.cc-banner,.cc-modal) .cc-btn--settings{background:transparent;color:var(--carbon);border:var(--rule) solid transparent;text-decoration:underline;
  text-decoration-color:var(--verdite);text-decoration-thickness:2px;text-underline-offset:3px}
@media(hover:hover){
  :is(.cc-banner,.cc-modal) .cc-btn--accept:hover{background:var(--carbon-hover);color:var(--surface)}
  :is(.cc-banner,.cc-modal) .cc-btn--reject:hover{background:var(--selection);border-color:var(--carbon);color:var(--carbon)}
  :is(.cc-banner,.cc-modal) .cc-btn--settings:hover{background:transparent;color:var(--carbon);text-decoration-thickness:3px}
}
:is(.cc-banner,.cc-modal) .cc-btn:focus-visible,.cc-modal .cc-modal__close:focus-visible{outline:3px solid var(--carbon);outline-offset:var(--focus-offset)}
.cc-overlay.cc-overlay{background:var(--scrim)}
.cc-modal.cc-modal{background:var(--surface);color:var(--carbon);border:var(--rule) solid var(--control-rule);border-radius:var(--radius-panel);box-shadow:var(--shadow-overlay);font-family:var(--font-body)}
.cc-modal .cc-modal__header,.cc-modal .cc-modal__footer{border-color:var(--border)}
.cc-modal .cc-modal__close{min-width:var(--touch-min);min-height:var(--touch-min);display:inline-flex;align-items:center;justify-content:center;color:var(--carbon);border-radius:var(--radius-control)}
.cc-modal .cc-category{border-color:var(--border);border-radius:var(--radius-control)}
.cc-modal .cc-category__badge{background:var(--selection);color:var(--carbon);border-radius:var(--radius-control);font-size:var(--text-label);font-weight:500;text-transform:none;letter-spacing:0}
.cc-toggle .cc-toggle__slider{background:var(--surface);border-color:var(--control-rule)}
.cc-toggle input:checked + .cc-toggle__slider{background:var(--carbon);border-color:var(--carbon)}
.cc-toggle input:checked + .cc-toggle__slider::before{background:var(--lime)}
.cc-toggle input:focus-visible + .cc-toggle__slider{outline:3px solid var(--carbon);outline-offset:2px}
.cc-float.cc-float{background:var(--surface);color:var(--carbon);border:var(--rule) solid var(--control-rule);box-shadow:none;min-width:var(--touch-min);min-height:var(--touch-min)}