/* HRGP shared UI sheet (shadcn-style), step 1 of the site-wide restyle (Brad, Oct 27: "follow shadcn, use the HRGP logo blue and orange for accents, no heavy fonts, consistent on all pages").
   Loaded last (build.mjs). Tokens + opt-in .ui-* components only: nothing here restyles an existing element until a page or a later step uses these classes.
   Rules: weights 400 and 500 only; 1px borders; 8px radius; blue = actionable, orange = current / needs attention; table names dark, underline on hover only.
   Logo colours: blue #12308A, orange #FF5A00 (same values as --brand-blue / --brand-orange in brand.css). */
:root{--ui-bg:#fff;--ui-fg:#0f172a;--ui-muted:#f6f7f9;--ui-muted-fg:#5b6679;--ui-border:#e4e7ec;--ui-ring:var(--brand-blue,#12308A);
--ui-primary:var(--brand-blue,#12308A);--ui-primary-hover:#0e2670;--ui-primary-fg:#fff;--ui-primary-soft:#edf2ff;--ui-primary-line:#d6e1ff;
--ui-accent:var(--brand-orange,#FF5A00);--ui-accent-soft:#fff1e8;--ui-accent-line:#ffd9c2;--ui-accent-text:#b93c00;
--ui-danger:#d92d20;--ui-danger-soft:#fef3f2;--ui-danger-line:#f3c0bb;--ui-radius:8px;--ui-ctl-h:36px;--ui-ctl-h-sm:30px}
.shell[data-theme="dark"]{--ui-bg:#101a30;--ui-fg:#f0f4fa;--ui-muted:#162240;--ui-muted-fg:#a9b8d3;--ui-border:#2b3a5c;--ui-ring:#8fb0ff;
--ui-primary:#3f68d8;--ui-primary-hover:#5379e0;--ui-primary-soft:#1a2b5c;--ui-primary-line:#2d478f;
--ui-accent-soft:#3a2214;--ui-accent-line:#7a3a14;--ui-accent-text:#ff9a5c;--ui-danger-soft:#3a1714;--ui-danger-line:#7a2a24}
/* buttons: filled (ui-btn-primary), outlined (ui-btn-outline), text (ui-btn-ghost), red outline (ui-btn-danger); add ui-btn-sm for tables */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:var(--ui-ctl-h);padding:0 14px;border:1px solid transparent;border-radius:var(--ui-radius);font-family:inherit;font-weight:500;font-size:0.875rem;line-height:1;cursor:pointer;transition:background .15s,border-color .15s;text-decoration:none;white-space:nowrap}
.ui-btn:disabled{opacity:.5;cursor:not-allowed}
.ui-btn:focus-visible,.ui-field :is(input,select,textarea):focus-visible{outline:2px solid var(--ui-ring);outline-offset:2px}
.ui-btn-primary{background:var(--ui-primary);color:var(--ui-primary-fg)}
.ui-btn-primary:hover:not(:disabled){background:var(--ui-primary-hover)}
.ui-btn-outline{background:var(--ui-bg);border-color:var(--ui-border);color:var(--ui-fg)}
.ui-btn-outline:hover:not(:disabled){background:var(--ui-muted)}
.ui-btn-ghost{background:transparent;color:var(--ui-fg)}
.ui-btn-ghost:hover:not(:disabled){background:var(--ui-muted)}
.ui-btn-danger{background:var(--ui-bg);border-color:var(--ui-danger-line);color:var(--ui-danger)}
.ui-btn-danger:hover:not(:disabled){background:var(--ui-danger-soft)}
.ui-btn-sm{height:var(--ui-ctl-h-sm);padding:0 10px;font-size:0.8125rem}
/* card */
.ui-card{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:calc(var(--ui-radius) + 4px);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.ui-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ui-border)}
.ui-card-body{padding:16px 20px}
.ui-card-title{margin:0;font-size:1rem;font-weight:500;letter-spacing:-.01em;color:var(--ui-fg)}
.ui-card-sub{margin:2px 0 0;font-size:0.875rem;font-weight:400;color:var(--ui-muted-fg)}
/* fields */
.ui-field{display:grid;gap:6px}
.ui-field>label,.ui-label{font-size:0.8125rem;font-weight:500;line-height:1.3;color:var(--ui-fg);text-transform:none;letter-spacing:normal}
.ui-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea){box-sizing:border-box;min-height:var(--ui-ctl-h);padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);font-family:inherit;font-weight:400;font-size:0.875rem;line-height:1.4}
.ui-field textarea{padding:8px 12px}
.ui-field :is(input,textarea)::placeholder{color:var(--ui-muted-fg);font-weight:400}
/* tags: ui-badge (neutral), -blue, -orange, -danger; ui-badge-dot adds a small dot */
.ui-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-bg);color:var(--ui-muted-fg);font-size:0.75rem;font-weight:500;line-height:1;white-space:nowrap}
.ui-badge-blue{background:var(--ui-primary-soft);border-color:var(--ui-primary-line);color:var(--ui-primary)}
.ui-badge-orange{background:var(--ui-accent-soft);border-color:var(--ui-accent-line);color:var(--ui-accent-text)}
.ui-badge-danger{background:var(--ui-danger-soft);border-color:var(--ui-danger-line);color:var(--ui-danger)}
.ui-badge-dot:before{content:"";width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor}
/* tabs: active tab blue with an orange underline */
.ui-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ui-border)}
.ui-tabs>button{position:relative;padding:8px 12px;border:0;border-radius:6px 6px 0 0;background:none;color:var(--ui-muted-fg);font-family:inherit;font-weight:500;font-size:0.875rem;line-height:1.4;cursor:pointer}
.ui-tabs>button:hover{color:var(--ui-fg)}
.ui-tabs>button[aria-selected=true],.ui-tabs>button.active{color:var(--ui-primary)}
.ui-tabs>button[aria-selected=true]:after,.ui-tabs>button.active:after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--ui-accent)}
/* table: headers small gray medium, cells regular gray, the row's name (ui-name) dark medium, underline only on hover */
.ui-table{width:100%;border-collapse:collapse}
.ui-table th{padding:10px 20px;border-bottom:1px solid var(--ui-border);background:var(--ui-muted);color:var(--ui-muted-fg);font-size:0.75rem;font-weight:500;text-align:left;text-transform:none;letter-spacing:normal}
.ui-table td{padding:12px 20px;border-bottom:1px solid var(--ui-border);color:var(--ui-muted-fg);font-weight:400}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table tbody tr:hover{background:var(--ui-muted)}
.ui-table .ui-name,.ui-table .ui-name a{color:var(--ui-fg);font-weight:400;text-decoration:none}
.ui-table .ui-name a:hover{text-decoration:underline;text-underline-offset:3px}
.ui-row-actions{display:flex;justify-content:flex-end;gap:6px}
/* notice */
.ui-notice{padding:10px 14px;border:1px solid var(--ui-accent-line);border-radius:var(--ui-radius);background:var(--ui-accent-soft);color:var(--ui-accent-text);font-weight:400}
/* body of a card: 14px text like shadcn, stacked with 16px gaps; ui-stack lets tags and buttons keep their own width */
.ui-card-body{font-size:0.875rem;line-height:1.5;color:var(--ui-fg)}
.ui-card-body :is(p,ul,dl,dd){margin:0}
.ui-stack{display:grid;gap:16px;align-content:start}
.ui-stack>:is(.ui-btn,.ui-badge),.ui-section>:is(.ui-btn,.ui-badge){justify-self:start}
.ui-card-body a:not(.ui-btn){color:var(--ui-primary);font-weight:500;text-decoration:none}
.ui-card-body a:not(.ui-btn):hover{text-decoration:underline;text-underline-offset:3px}
.ui-muted{color:var(--ui-muted-fg);font-weight:400}
/* sub-heading inside a card (dark, medium) and a section set off by a thin line */
.ui-subhead{margin:0;font-size:0.875rem;font-weight:500;line-height:1.4;letter-spacing:normal;color:var(--ui-fg)}
.ui-section{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:1px solid var(--ui-border)}
/* plain list; ui-rows puts a thin line between the items (ui-row = one item laid out as a small stack) */
.ui-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ui-rows>:is(li,div),.ui-row{display:grid;gap:6px;align-content:start}
.ui-rows>:is(li,div){padding:12px 0;border-bottom:1px solid var(--ui-border)}
.ui-rows>:is(li,div):first-child{padding-top:0}
.ui-rows>:is(li,div):last-child{padding-bottom:0;border-bottom:0}
.ui-rows>li>.ui-badge,.ui-row>.ui-badge{justify-self:start}
.ui-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.heading+.ui-card,.ui-card+.ui-page-actions,.hrgp-myform .heading+.ui-card{margin-top:16px}
.ui-page-actions{margin-top:16px}
/* label / value pairs */
.ui-facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px}
.ui-facts dt{color:var(--ui-muted-fg)}
.ui-facts dd{margin:0;color:var(--ui-fg)}
/* ---- Step 2 (Oct 27): the Hiring Processes page (.wa-page; its list/editor pieces use .wf-*) in the shared look. Prefix is .shell x4 so it wins over the page's own <style> and typography.css.
   Later steps remove the old bold rules; until then this block is what makes the page light. Headings 500, labels/headers small gray 500, names dark 500, cells 400, buttons 36px / 8px. ---- */
.shell.shell.shell.shell .wa-page :is(h1,h2,h3,h4){font-weight:500!important;color:var(--ui-fg)!important;letter-spacing:-.01em!important}
.shell.shell.shell.shell .wa-page>.heading h1{font-size:1.5rem!important;line-height:1.3}
.shell.shell.shell.shell .wa-page :is(.eyebrow,.hrgp-eyebrow){font-weight:500!important;letter-spacing:.08em!important}
.shell.shell.shell.shell .wa-page .subheading{color:var(--ui-muted-fg)!important;font-weight:400!important}
.shell.shell.shell.shell .wa-page :is(label,.wa-field>span,.wf-help,.wa-muted){font-weight:400!important;text-transform:none!important;letter-spacing:normal!important}
.shell.shell.shell.shell .wa-page label:not(:has(input[type=checkbox],input[type=radio])),.shell.shell.shell.shell .wa-page .wa-field>span{font-size:.8125rem!important;font-weight:500!important;color:var(--ui-fg)!important}
/* tabs */
.shell.shell.shell.shell .wa-page :is(.wa-tabs,.wf-tabs){gap:4px;border-bottom:1px solid var(--ui-border)}
.shell.shell.shell.shell .wa-page :is(.wa-tabs,.wf-tabs) button{min-height:40px;padding:8px 12px;font-weight:500!important;color:var(--ui-muted-fg)!important;background:none;border:0;border-radius:6px 6px 0 0}
.shell.shell.shell.shell .wa-page :is(.wa-tabs,.wf-tabs) button:hover{color:var(--ui-fg)!important}
.shell.shell.shell.shell .wa-page :is(.wa-tabs,.wf-tabs) button:is(.active,[aria-current=page],[aria-selected=true]){color:var(--ui-primary)!important}
/* cards */
.shell.shell.shell.shell .wa-page :is(.wf-list-card,.wa-card){border-radius:calc(var(--ui-radius) + 4px);border:1px solid var(--ui-border);box-shadow:0 1px 2px rgba(16,24,40,.05);background:var(--ui-bg)}
/* buttons: primary filled blue, everything else outlined */
.shell.shell.shell.shell .wa-page button:not(.wa-tabs button):not(.wf-tabs button):not(th button):not(.wf-title):not(.wa-link){min-height:var(--ui-ctl-h);padding:0 14px;border-radius:var(--ui-radius);font-size:.875rem!important;font-weight:500!important;line-height:1}
.shell.shell.shell.shell .wa-page button.primary{background:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-primary-fg)!important}
.shell.shell.shell.shell .wa-page button.primary:hover:not(:disabled){background:var(--ui-primary-hover)}
.shell.shell.shell.shell .wa-page :is(.wf-footer,.wa-footer) button{background:var(--ui-bg);border:1px solid var(--ui-border);color:var(--ui-fg)!important;min-height:var(--ui-ctl-h-sm);font-size:.8125rem!important}
/* fields */
.shell.shell.shell.shell .wa-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:var(--ui-ctl-h);border-radius:var(--ui-radius);border:1px solid var(--ui-border);background:var(--ui-bg);color:var(--ui-fg)!important;font-size:.875rem!important;font-weight:400!important}
.shell.shell.shell.shell .wa-page .wf-list-toolbar .wf-search{min-height:var(--ui-ctl-h)}
/* tables */
.shell.shell.shell.shell.shell.shell .wa-page table :is(th,th button){font-size:.75rem!important;font-weight:500!important;letter-spacing:normal!important;text-transform:none!important;color:var(--ui-muted-fg)!important}
.shell.shell.shell.shell.shell.shell .wa-page table th{background:var(--ui-muted);padding:10px 20px;border-bottom:1px solid var(--ui-border)}
.shell.shell.shell.shell .wa-page table td{height:auto;padding:12px 20px;font-size:.875rem!important;font-weight:400!important;color:var(--ui-muted-fg)!important;border-bottom:1px solid var(--ui-border)}
.shell.shell.shell.shell .wa-page table tbody tr:hover{background:var(--ui-muted)}
.shell.shell.shell.shell .wa-page table td :is(.wf-title,.wa-link,.wa-row-open){font-size:.875rem!important;font-weight:400!important;color:var(--ui-fg)!important;text-decoration:none!important;background:none;border:0;padding:0;min-height:0}
.shell.shell.shell.shell .wa-page table td :is(.wf-title,.wa-link,.wa-row-open):hover{text-decoration:underline!important;text-underline-offset:3px}
/* the small number / type / status chips */
.shell.shell.shell.shell .wa-page :is(.wf-list-number,.wf-list-type,.wa-badge,.wf-badge,.wf-list-total){height:22px;display:inline-flex;align-items:center;padding:0 8px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-bg);color:var(--ui-muted-fg)!important;font-size:.75rem!important;font-weight:500!important;line-height:1}
.shell.shell.shell.shell .wa-page .wa-notice{border:1px solid var(--ui-accent-line);background:var(--ui-accent-soft);color:var(--ui-accent-text)!important;border-radius:var(--ui-radius)}
.shell.shell.shell.shell .wa-page .wa-notice strong{font-weight:500!important}
.shell.shell.shell.shell .wa-page :is(.wa-tabs,.wf-tabs) button{position:relative}
.shell.shell.shell.shell .wa-page :is(.wa-tabs,.wf-tabs) button:is(.active,[aria-current=page],[aria-selected=true]):after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--ui-accent)}
/* Page label above a title (the small orange "eyebrow"): ALL CAPS kept (Brad, Oct 27), but lighter than before: medium weight, small, brand orange text. The source text is typed in capitals, so no transform is needed. */
.shell.shell.shell.shell .eyebrow{font-size:.75rem!important;font-weight:500!important;letter-spacing:.08em!important;color:var(--ui-accent-text)!important;text-transform:none!important;margin-bottom:6px}
.shell.shell.shell.shell:not([data-theme="dark"]) :is(.eyebrow,p.eyebrow,.hrgp-ems>.heading .eyebrow){color:var(--ui-accent-text)!important} /* the responsive sheet forces orange with !important */
/* ---- Step 3a (Oct 27): the shared frame (left menu, top bar, Reminder button) in the light weights. Menu items regular, the open page medium; no bold anywhere in the frame. ---- */
.shell.shell.shell.shell.shell :is(.sidebar nav button,.sidebar-bottom>button,.sidebar nav button span,.hrgp-tools-nav-title,.hrgp-logout){font-weight:400!important}
.shell.shell.shell.shell.shell :is(.sidebar nav button.selected,.sidebar-bottom>button.selected,.sidebar nav button.selected span){font-weight:500!important}
.shell.shell.shell.shell.shell :is(.breadcrumb strong,.hrgp-rem-add,.hrgp-rem-add span,.avatar,.hrgp-rem-badge){font-weight:500!important}
/* ---- Step 3b (Oct 27): site-wide text weights. Page titles, headings, bold words, tabs, field labels and table headers use regular / medium type; labels and headers are sentence case, not ALL CAPS. 7x .shell beats the older sheets. ---- */
.shell.shell.shell.shell.shell.shell.shell :is(h1,h2,h3,h4,h5,h6,strong,b,legend,summary){font-weight:500!important}
.shell.shell.shell.shell.shell.shell.shell :is(.tabs button,.tabs button.active,[role=tab]){font-weight:500!important}
.shell.shell.shell.shell.shell.shell.shell label:not(:has(input[type=checkbox],input[type=radio])){font-size:.8125rem!important;font-weight:500!important;line-height:1.3;text-transform:none!important;letter-spacing:normal!important;color:var(--ui-fg)!important}
.shell.shell.shell.shell.shell.shell.shell label>span:first-child{text-transform:none!important;letter-spacing:normal!important}
.shell.shell.shell.shell.shell.shell.shell :is(th,th button){font-size:.75rem!important;font-weight:500!important;text-transform:none!important;letter-spacing:normal!important;color:var(--ui-muted-fg)!important}
.shell.shell.shell.shell.shell.shell.shell :is(.applicant-filterbar label,.applicant-list-job-filter>span,.applicant-tag-filter>span,.applicant-date-field>span,.applicant-saved-view-panel label,.filters>label,.filter-bar label,.toolbar label,.comm-label,.hrgp-field-label){font-size:.8125rem!important;font-weight:500!important;line-height:1.3;text-transform:none!important;letter-spacing:normal!important;color:var(--ui-fg)!important}
.shell.shell.shell.shell.shell.shell.shell :is(footer span,.applicant-list-footer span){font-weight:400!important}
/* ---- Step 3c (Oct 27): Job Postings and shared bits. Filled buttons medium; tags (badges) medium and small; the main name in a list row regular and dark; stat labels regular; counts that open a list are plain blue links. ---- */
.shell.shell.shell.shell.shell.shell.shell :is(button.primary,.primary,.badge){font-weight:500!important}
.shell.shell.shell.shell.shell.shell.shell td :is(.job-title-link,.applicant-name-button,.wf-title,.wa-link,.hrgp-im-name-link,a.row-link){font-weight:400!important}
.shell.shell.shell.shell.shell.shell.shell .summary>div>span{font-weight:400!important;color:var(--ui-muted-fg)!important}
.shell.shell.shell.shell.shell.shell.shell .job-applicants-link{font-weight:400!important;color:var(--ui-primary)!important}
.shell.shell.shell.shell.shell.shell.shell .job-applicants-link:hover{text-decoration:underline!important;text-underline-offset:3px}
.shell.shell.shell.shell.shell.shell.shell :is(.footer>span,.footer span,.applicant-list-footer span){font-weight:400!important}
/* ---- Step 3d (Oct 27): Employees. Sub-tabs and tabs medium, avatar initials and status chips medium, the person's name regular. Brad: this sheet always wins over older rules, hence !important. ---- */
.shell.shell.shell.shell.shell.shell.shell :is(.hrgp-ems-tabs button,.hrgp-ems-subnav button,.hrgp-ems-subnav-actions button,.hrgp-ems-avatar,.hrgp-ems-status){font-weight:500!important}
.shell.shell.shell.shell.shell.shell.shell :is(.hrgp-ems-person strong,.hrgp-ems td strong){font-weight:400!important}
.shell.shell.shell.shell.shell.shell.shell .hrgp-ems-employee-subnav button:not(.secondary):not(.primary){font-weight:500!important}
/* ---- Step 3e (Oct 27): Settings and shared controls. Outlined / link buttons medium; definition-list terms medium; checkboxes and radios in HRGP blue. ---- */
.shell.shell.shell.shell.shell.shell.shell :is(.secondary,a.secondary,dt){font-weight:500!important}
.shell.shell.shell.shell.shell.shell.shell :is(input[type=checkbox],input[type=radio]){accent-color:var(--ui-primary)}
/* ---- Step 3f (Oct 27): every page, also the ones outside .shell (not-found, form-link, meeting, reminders, activity report, trial emails, profile, new-hire forms). html:not(#_) gives an id's worth of specificity, so no older class rule can beat it; !important beats inline styles too. Brad: this sheet always wins. ---- */
html:not(#_) :is(h1,h2,h3,h4,h5,h6,strong,b,th,legend,summary,button,.primary,.secondary,.eyebrow,label>span,.hrgp-nf p,.hrgp-fl-head,.hrgp-mira-count,.customer-brand strong,.hrgp-aw-primary,.hrgp-rem-scope button,.hrgp-rem-count,.hrgp-rem-due,.hrgp-rem-done,.hrgp-rem-snooze,.hrgp-rem-more){font-weight:500!important}
html:not(#_) :is(.hrgp-rem-link,td a,td button.row-link){font-weight:400!important}
html:not(#_) :is(.hrgp-nf p,.hrgp-fl-head,.customer-brand strong){letter-spacing:.04em}
html:not(#_) :is(.hrgp-trial-eyebrow,em,label){font-weight:500!important}
html:not(#_) label:not(:has(input[type=checkbox],input[type=radio])){text-transform:none!important;letter-spacing:normal!important}
/* ---- Step 4a (Oct 27): one size for every main control, on every page (Brad: "everything needs to agree with the sheet; anything already there gets overwritten"). Default control = 36px tall, 8px corners, 14px type, border #e4e7ec. Filled = .primary (and the few filled buttons with their own class); outlined = .secondary; fields = selects, search/date/password/e-mail boxes, textareas. Compact table buttons stay 32px (typography.css). ---- */
html:not(#_) :is(button.primary,a.primary,.hrgp-rem-done,.hrgp-aw-primary){box-sizing:border-box!important;height:36px!important;min-height:36px!important;padding:0 16px!important;border-radius:8px!important;font-size:.875rem!important;line-height:1!important;border:1px solid var(--ui-primary)!important;background:var(--ui-primary)!important;color:#fff!important}
html:not(#_) :is(button.primary,a.primary,.hrgp-rem-done,.hrgp-aw-primary):hover:not(:disabled){background:var(--ui-primary-hover)!important}
html:not(#_) :is(button.secondary,a.secondary){box-sizing:border-box!important;height:36px!important;min-height:36px!important;padding:0 14px!important;border-radius:8px!important;font-size:.875rem!important;line-height:1!important;border:1px solid var(--ui-border)!important;background:var(--ui-bg)!important;color:var(--ui-fg)!important}
html:not(#_) :is(select,input[type=search],input[type=date],input[type=time],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=url],input.wf-search){box-sizing:border-box!important;height:36px!important;min-height:36px!important;border-radius:8px!important;font-size:.875rem!important;border-color:var(--ui-border)!important}
html:not(#_) textarea{border-radius:8px!important;font-size:.875rem!important;border-color:var(--ui-border)!important}
/* Step 4b: the remaining outlined controls with their own sizes (reminder row buttons, Applicants filter triggers, Hiring Processes Refresh) and the admin pages' text boxes */
html:not(#_) :is(.hrgp-rem-row-actions button:not(.hrgp-rem-done),.hrgp-rem-snooze,.hrgp-rem-more,.applicant-list-job-picker>button,.applicant-tag-trigger,.applicant-date-trigger,.applicant-filter-actions button,.wf-heading button,.wa-page .wf-heading button){box-sizing:border-box!important;height:36px!important;min-height:36px!important;border-radius:8px!important;font-size:.875rem!important;border-color:var(--ui-border)!important}
html:not(#_) :is(.hrgp-aw,.hrgp-aw-panel,.hrgp-aw-admin) :is(input[type=text],input:not([type])){box-sizing:border-box!important;height:36px!important;border-radius:8px!important;font-size:.875rem!important;border:1px solid var(--ui-border)!important}
/* Step 4c (Oct 27): sign-in / sign-up pages join the standard (Google, Microsoft, Sign in = outlined / filled 36px), their small label and links lose their bold. */
html:not(#_) :is(.hrgp-google,.hrgp-microsoft,.hrgp-auth-submit){box-sizing:border-box!important;height:36px!important;min-height:36px!important;border-radius:8px!important;font-size:.875rem!important;font-weight:500!important;border-color:var(--ui-border)!important}
html:not(#_) .hrgp-auth-submit{background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;color:#fff!important}
html:not(#_) :is(.hrgp-auth-eyebrow,.hrgp-auth-link,.hrgp-signup-accept a,.hrgp-auth-card a){font-weight:500!important}
html:not(#_) .hrgp-auth-card :is(input:not([type=checkbox]):not([type=radio])){box-sizing:border-box!important;height:36px!important;border-radius:8px!important;font-size:.875rem!important;border-color:var(--ui-border)!important}
/* Touch targets: the site keeps every button at least 44px tall on tablets and phones (responsive-usability.css), and fields at 16px type on phones so iOS does not zoom. The 36px sizes above are for computers only. */
@media (max-width:1024px){
 html:not(#_) :is(button.primary,a.primary,.hrgp-rem-done,.hrgp-aw-primary,button.secondary,a.secondary,select,input[type=search],input[type=date],input[type=time],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=url],input.wf-search,.hrgp-rem-row-actions button:not(.hrgp-rem-done),.hrgp-rem-snooze,.hrgp-rem-more,.applicant-list-job-picker>button,.applicant-tag-trigger,.applicant-date-trigger,.applicant-filter-actions button,.wf-heading button,.hrgp-google,.hrgp-microsoft,.hrgp-auth-submit,.hrgp-auth-card input:not([type=checkbox]):not([type=radio]),.hrgp-aw input[type=text]){height:44px!important;min-height:44px!important}
}
@media (max-width:640px){
 html:not(#_) :is(select,textarea,input:not([type=checkbox]):not([type=radio])),html:not(#_) .hrgp-auth-card input:not([type=checkbox]):not([type=radio]),html:not(#_) .hrgp-aw input[type=text]{font-size:1rem!important}
}
html:not(#_) :is(input,select,textarea,option){font-weight:400!important} /* typed values stay regular even inside a medium-weight label */
html:not(#_):not(#__) td :is(strong,b){font-weight:400!important} /* a name shown in <strong> inside a table row is regular, like the linked names (Brad: no heavy names) */

/* ---- Oct 28: one font for every page, Inter (Brad: "which is consistent with shad CN"; shadcn uses a single sans font). Variable font, weights 400 and 500 used. The two font files are written to dist/assets by build.mjs (placeholders below). Code and fixed-width text keep their monospace font. ---- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-latin-ext-a28eb6d3ccb5.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/inter-latin-c940764593d0.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html:not(#_) *:not(code):not(pre):not(kbd):not(samp){font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important}
/* Oct 28: public forms (new-hire government forms and the other plain form pages) get the same full 1px border, 8px corners and a full-width box on every field; before, text/tel/date boxes kept the browser's thick inset border at different widths. */
html:not(#_) :is(.hrgp-gov-forms) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){box-sizing:border-box!important;width:100%!important;max-width:100%!important;border:1px solid var(--ui-border)!important;border-radius:8px!important;background-color:var(--ui-bg)!important;font-size:.875rem!important}
html:not(#_) :is(.hrgp-gov-forms) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){height:36px!important;min-height:36px!important;padding:0 12px!important}
@media (max-width:1024px){html:not(#_) :is(.hrgp-gov-forms) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){height:44px!important;min-height:44px!important}}
@media (max-width:640px){html:not(#_) :is(.hrgp-gov-forms) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font-size:1rem!important}}

/* ---- Oct 28: phones, tablets and dark theme (Brad: "everything looks terrific on all devices"). Found by a page-by-page look at 375px wide, light and dark. ---- */
/* Buttons without a class (Drafts, Add Job Manually, Refresh, Cancel, editor toolbar, the notice's "Got it") and the theme toggle follow the sheet's outlined look, so they no longer stay bright white in dark theme. */
html:not(#_) :is(.heading>div>button:not([class]),.hrgp-native-actions button:not([class]),.editor-fields button:not([class]),.job-format-toolbar button:not([class]),.hrgp-tags-notice button,.hrgp-theme-toggle){box-sizing:border-box!important;background:var(--ui-bg)!important;color:var(--ui-fg)!important;border:1px solid var(--ui-border)!important;border-radius:8px!important}
html:not(#_) :is(.heading>div>button:not([class]),.hrgp-tags-notice button){height:36px!important;min-height:36px!important;padding:0 14px!important;font-size:.875rem!important;white-space:nowrap!important;flex:none!important}
@media (max-width:1024px){html:not(#_) :is(.heading>div>button:not([class]),.hrgp-tags-notice button){height:44px!important;min-height:44px!important}}
html:not(#_) .hrgp-tags-notice{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 16px!important}
html:not(#_) .hrgp-tags-notice>span{flex:1 1 260px!important;min-width:0!important}
/* The selected tab in dark theme is an underlined label like in light theme, not a filled box. */
html:not(#_) .shell[data-theme="dark"] .tabs button.active{background:transparent!important}
/* Long placeholders end in an ellipsis instead of being cut mid-letter. */
html:not(#_) :is(input,textarea){text-overflow:ellipsis}
/* Table column headings stay on one line; the table scrolls sideways inside its card instead of the whole page (Job Postings). */
html:not(#_) :is(.wf-table,.jobs-table,.wa-page table) th{white-space:nowrap!important}
html:not(#_) .jobs-content .table-wrap{overflow-x:auto!important;max-width:100%!important}
/* screen-reader-only text inside a scrolling table is positioned against the table box, so it can no longer widen the whole page */
html:not(#_) .table-wrap{position:relative!important}
/* Applicants: the two small filters (Tags, Applied) stay inside their column. */
html:not(#_) :is(.applicant-tag-control,.applicant-date-control){min-width:0!important;border:0!important;background:transparent!important}
html:not(#_) :is(.applicant-tag-trigger,.applicant-date-trigger){box-sizing:border-box!important;max-width:100%!important;border:1px solid var(--ui-border)!important}
@media (max-width:640px){
 /* Top bar: show only the page name (the "Workspace /" part is what pushed it to "Ap…"). */
 html:not(#_) .topbar .breadcrumb{font-size:0!important}
 html:not(#_) .topbar .breadcrumb strong{font-size:1rem!important;display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
 html:not(#_) .topbar .breadcrumb span{display:none!important}
 /* Applicants: an empty Step cell no longer leaves a blank band under every applicant. */
 html:not(#_) .applicant-list-table .applicant-step-cell:empty{display:none!important}
}
/* New-hire forms: the main button never wider than the screen. */
html:not(#_) .hrgp-gov-forms :is(button.primary,button.secondary,a.primary){max-width:100%!important;white-space:normal!important;height:auto!important;min-height:36px!important;padding-top:8px!important;padding-bottom:8px!important;line-height:1.25!important}
@media (max-width:1024px){html:not(#_) .hrgp-gov-forms :is(button.primary,button.secondary,a.primary){min-height:44px!important}}
/* Government forms (admin page): the row with the form picker, the e-mail box and "Create link" wraps on phones instead of squeezing the button off the screen. */
@media (max-width:640px){html:not(#_) section.ov-row{flex-wrap:wrap!important;gap:8px!important}html:not(#_) section.ov-row :is(select,input){min-width:0!important;flex:1 1 140px!important}html:not(#_) section.ov-row button{flex:none!important;white-space:nowrap!important}}

/* Oct 28 trial setup: a dropdown's text (for example "None") was cut off; the box now fits its text */
.hrgp-edit-field select{width:100%;min-width:0;height:auto;min-height:var(--ui-ctl-h,40px);box-sizing:border-box;white-space:normal}
/* Oct 28 trial setup: the one-line explanation under a setup field */
.hrgp-edit-help{display:block;margin-top:4px;color:#5b6678;font-size:0.8125rem;line-height:1.4}
/* Oct 28 row 8: group headings on Settings > Company (Basics, Hiring defaults, Careers page, More options) */
.hrgp-edit-group{margin:18px 0 6px;padding-top:12px;border-top:1px solid var(--ui-border,#e1e7f1)}
.hrgp-edit-group:first-child{margin-top:0;padding-top:0;border-top:0}

/* Oct 28 (Company page, rebuilt in the shared look): two columns on computers, one on phones; a checkbox row; a scrolling table wrapper. */
.ui-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.ui-form-grid>*{min-width:0}
.ui-form-grid>.ui-span-2{grid-column:1/-1}
.ui-field :is(input,select){width:100%;min-width:0}
.ui-card,.ui-stack>*{min-width:0}
@media (max-width:1180px){.ui-form-grid{grid-template-columns:minmax(0,1fr)}}
.ui-check{display:flex;align-items:center;gap:8px;font-size:0.875rem;line-height:1.4;color:var(--ui-fg);font-weight:400;cursor:pointer}
.ui-check input{width:16px;height:16px;margin:0;accent-color:var(--ui-primary)}
.ui-table-wrap{overflow-x:auto;border:1px solid var(--ui-border);border-radius:var(--ui-radius)}
/* Oct 28 (Company page): a logo or banner shown in its box; the upload button is a label that holds a hidden file input (the whole button clicks) */
.ui-image-box{display:flex;align-items:center;justify-content:center;min-height:112px;padding:12px;border:1px dashed var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-muted);overflow:hidden}
.ui-image-preview{display:block;max-width:100%;max-height:120px;object-fit:contain}
.ui-file-button{position:relative;cursor:pointer;overflow:hidden}
.ui-field .ui-file-button input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.ui-error{color:var(--ui-danger);font-size:0.8125rem;line-height:1.4}

.ui-image-hint{display:block;margin:-2px 0 0;font-size:0.8125rem;line-height:1.4}
/* Oct 28 (Forms update): sortable list headings, ticked-row bar, name link on Templates & Forms lists */
html:not(#_) .hrgp-native-table :is(.hrgp-sort-head,.hrgp-name-link){all:unset!important;box-sizing:border-box;cursor:pointer;font:inherit!important;color:inherit!important;text-align:left}
html:not(#_) .hrgp-native-table .hrgp-sort-head{font-weight:500!important}
html:not(#_) .hrgp-native-table .hrgp-name-link{color:var(--ui-fg)!important}
html:not(#_) .hrgp-native-table .hrgp-name-link:hover{text-decoration:underline!important;text-underline-offset:3px}
html:not(#_) .hrgp-native-table :is(.hrgp-sort-head,.hrgp-name-link):focus-visible{outline:2px solid var(--ui-ring)!important;outline-offset:2px}
html:not(#_) .hrgp-native-table :is(th,td).hrgp-tick-col{width:1%!important;min-width:0!important;padding-right:0!important;white-space:nowrap;vertical-align:middle}
html:not(#_) .hrgp-native-table .hrgp-tick-col input[type=checkbox]{display:block;margin:0}
.hrgp-native-table input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--ui-primary)}
.hrgp-bulk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;margin-bottom:10px;background:var(--ui-primary-soft);border:1px solid var(--ui-primary-line);border-radius:var(--ui-radius);color:var(--ui-fg);font-size:0.875rem}
html:not(#_) .hrgp-bulk-bar button{height:var(--ui-ctl-h-sm);padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);font:inherit;font-weight:500;cursor:pointer}
html:not(#_) .hrgp-bulk-bar button.primary{background:var(--ui-danger);border-color:var(--ui-danger);color:#fff}
/* Oct 28 (Forms update): time limit row under the form details; the category list shows its whole choice */
.hrgp-form-timing-grid{display:grid;grid-template-columns:auto minmax(0,200px);gap:20px;align-items:end;margin-top:16px}
.hrgp-form-timing-grid .hrgp-edit-field{margin:0;min-width:0}
html:not(#_) :is(.hrgp-form-basics-grid .hrgp-edit-field,.hrgp-form-builder,.hrgp-form-optional) select{box-sizing:border-box!important;height:40px!important;min-height:40px!important;line-height:normal!important;padding:0 32px 0 12px!important;overflow:visible!important}
.hrgp-form-basics-grid{align-items:end}
/* Oct 28 (Forms update): master account "Copy to customers" panel */
.hrgp-copy-panel{display:grid;gap:14px;padding:18px 20px;margin:0 0 16px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius);color:var(--ui-fg)}
.hrgp-copy-panel h3{margin:0;font-size:1.0625rem;font-weight:500}
.hrgp-copy-panel fieldset{margin:0;padding:12px 14px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);display:grid;gap:10px;min-width:0}
.hrgp-copy-panel legend{padding:0 6px;font-size:0.8125rem;font-weight:500;color:var(--ui-muted-fg)}
.hrgp-copy-panel .ui-check select{margin-left:8px;height:36px;min-width:200px}
.hrgp-copy-savegroup,.hrgp-copy-bulk,.hrgp-copy-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hrgp-copy-savegroup input{flex:1 1 260px;height:36px}
.hrgp-copy-actions{justify-content:flex-end}
.hrgp-copy-list{display:grid;gap:8px;max-height:260px;overflow:auto;padding:4px 2px}
html:not(#_) .hrgp-copy-panel button{height:var(--ui-ctl-h-sm);padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);font:inherit;font-size:0.875rem;font-weight:500;cursor:pointer}
html:not(#_) .hrgp-copy-panel input:is([type=text],[type=search]){box-sizing:border-box;height:36px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);font:inherit;font-size:0.875rem;width:100%}
html:not(#_) .hrgp-copy-savegroup input{width:auto}
html:not(#_) .hrgp-copy-panel button.primary{background:var(--ui-primary);border-color:var(--ui-primary);color:#fff}
html:not(#_) .hrgp-copy-panel button:disabled{opacity:.5;cursor:not-allowed}
/* Oct 28 (Forms update): Active / inactive filter above the Forms & Quizzes list */
.hrgp-list-filter{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:0.875rem;color:var(--ui-fg)}
html:not(#_) .hrgp-list-filter select{box-sizing:border-box!important;height:36px!important;min-height:36px!important;padding:0 32px 0 12px!important;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);font:inherit;font-size:0.875rem;width:auto}
html:not(#_) .hrgp-list-filter input.hrgp-list-search{box-sizing:border-box;height:36px;min-width:240px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);font:inherit;font-size:0.875rem}
.hrgp-list-filter{flex-wrap:wrap}
/* Oct 28 (Form Builder): field-type buttons, live preview beside the editor, duplicate, points, show-only-if, paste list */
html:not(#_) .hrgp-form-split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:16px;align-items:start}
@media (max-width:1100px){html:not(#_) .hrgp-form-split{grid-template-columns:minmax(0,1fr)}}
html:not(#_) .hrgp-form-live-preview{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);padding:16px}
html:not(#_) .hrgp-form-live-preview .hrgp-form-preview-field.selected{outline:2px solid var(--ui-primary);outline-offset:4px;border-radius:6px}
html:not(#_) .hrgp-form-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
html:not(#_) .hrgp-form-type{box-sizing:border-box;min-height:34px;padding:4px 8px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);font:inherit;font-size:0.8125rem;font-weight:500;line-height:1.2;text-align:left;cursor:pointer;white-space:normal}
html:not(#_) .hrgp-form-type:hover{border-color:var(--ui-primary);color:var(--ui-primary)}
html:not(#_) .hrgp-form-points,html:not(#_) .hrgp-form-showif label{display:block;font-size:0.875rem;margin:12px 0 0}
html:not(#_) .hrgp-form-points input,html:not(#_) .hrgp-form-showif select{display:block;box-sizing:border-box;height:40px;margin-top:4px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);font:inherit;font-size:0.875rem;width:100%;max-width:420px}
html:not(#_) .hrgp-form-paste{margin:8px 0}
html:not(#_) .hrgp-form-paste textarea{display:block;box-sizing:border-box;width:100%;max-width:420px;margin:6px 0;padding:8px 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font:inherit;font-size:0.875rem}
html:not(#_) .hrgp-form-paste summary{font-size:0.875rem;font-weight:500;cursor:pointer}
html:not(#_) .hrgp-form-showif{margin:0 0 12px}
/* Oct 28 (Form Builder): edit a starter group */
html:not(#_) .hrgp-copy-groupedit{display:grid;gap:10px;margin:10px 0;padding:12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius)}
html:not(#_) .hrgp-copy-groupedit input[type=text],html:not(#_) .hrgp-copy-groupedit select{box-sizing:border-box;height:36px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);font:inherit;font-size:0.875rem;max-width:420px;width:100%}
html:not(#_) .hrgp-copy-members{list-style:none;margin:0;padding:0;display:grid;gap:6px}
html:not(#_) .hrgp-copy-members li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:0.875rem}
html:not(#_) .hrgp-copy-addform{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
html:not(#_) .hrgp-copy-groupedit button{box-sizing:border-box;height:32px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-bg);color:var(--ui-fg);font:inherit;font-size:0.875rem;font-weight:500;cursor:pointer}
html:not(#_) .hrgp-copy-groupedit button.primary{justify-self:start;background:var(--ui-primary);border-color:var(--ui-primary);color:#fff}
html:not(#_) .hrgp-copy-groupedit button:disabled{opacity:.5;cursor:not-allowed}