/* Simplification pass (owner, 2026-10-05): security pages. */

/* Security · People: clearance pills drawn as on Clearances; "None" lighter. */
.sec-pill{display:inline-block;min-width:7rem;text-align:center;padding:.2rem .7rem;border-radius:999px;font-weight:600;font-size:.9rem;border:2px solid #a0aec0;line-height:1.3}
.sec-pill-active{background:#2f855a;border-color:#2f855a;color:#fff}
.sec-pill-in-progress{background:#fefcbf;border-color:#b7791f;color:#744210}
.sec-pill-none,.sec-pill-not-required{background:transparent;border-color:#718096}
.sec-pill-inactive{background:transparent;border-color:var(--danger);color:var(--danger)}
.sec-pill-unknown{background:transparent;border-style:dashed;border-color:#a0aec0;font-weight:400}
.sec-none{color:var(--text-soft,#8a94a3);opacity:.7}

/* Clearances: the four counts on one row. */
.clearances-workspace .clearance-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:600px){.clearances-workspace .clearance-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.clearance-edit .unclassified-only{margin:.3rem 0 0}

/* Security training: one row of squares per person, as on Training. */
.st-counts{display:flex;gap:8px;flex-wrap:wrap}
.st-key{display:inline-block;font-size:.8rem;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid currentColor}
.st-key.st-good{color:var(--ok)}.st-key.st-warn{color:#9a5b00}.st-key.st-bad{color:var(--danger)}
:root[data-theme="dark"] .st-key.st-warn{color:#f0b45a}
.st-people{list-style:none;margin:0;padding:0}
.st-person{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.st-name{font-weight:600;overflow-wrap:break-word;min-width:0}
.st-tiles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.st-tile{width:7.5rem;min-height:5.2rem;box-sizing:border-box;padding:8px;border-radius:10px;border:2px solid var(--line);background:var(--card);display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.st-course{font-size:.8rem;font-weight:600;line-height:1.2}
.st-state{font-size:.75rem;line-height:1.2}
.st-tile.st-good{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--card))}
.st-tile.st-warn{border-color:#c98a1a;background:color-mix(in srgb,#c98a1a 14%,var(--card))}
.st-tile.st-bad{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--card))}
.st-tile.st-bad .st-state{color:var(--danger);font-weight:600}
.st-tile.st-none{opacity:.45;border-style:dashed}
@media(max-width:600px){.st-person{grid-template-columns:1fr}.st-tile{width:calc(50% - 4px)}}

/* Foreign travel: one table, a When column. */
.ft-when{font-size:.8rem;font-weight:600;white-space:nowrap}
.ft-when-up{color:var(--accent,#2b5d9a)}
.ft-when-past{color:var(--text-light,#777);font-weight:400}

/* An "+ Add …" button above a list; its form opens over the page. */
.sec-add-row{display:flex;justify-content:flex-start;margin:0 0 12px}
#pop-contract-add,#pop-trip-add{width:min(56rem,calc(100vw - 32px))}

/* A list's heading with a narrow "Show" filter on the same line. */
.sec-list-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:16px 0 8px}
.sec-list-head h3{margin:0}
.sec-show{display:flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap}
.sec-show .btn{white-space:nowrap}
.sec-show label{font-weight:600;margin:0}
.sec-show select{width:auto;max-width:16rem;min-width:0}
.sec-add-row{gap:8px;align-items:center;flex-wrap:wrap}

/* People (Admin and Leadership levels): "+ Add a team member" beside the
   selector; the Name column unshaded; the birthday calendar in a panel. */
.person-picker-box .person-picker-form{flex:0 1 32rem}
.main .people-directory table tbody th{background:transparent}
#pop-birthday-calendar{width:min(60rem,calc(100vw - 32px))}
.people-bday-row{margin-top:16px}

/* A heading with one action at its end, on the same line. */
.sec-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sec-title-row h1{margin:0}
.sec-title-action{margin-left:auto}

/* Org chart: a bigger Edit in each box's corner. */
.orgchart-box .orgchart-edit-link{top:6px;right:6px;font-size:.85rem;font-weight:600;padding:3px 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);text-decoration:none;line-height:1.3}
.orgchart-box .orgchart-edit-link:hover{background:var(--chip)}
.orgchart .orgchart-box:has(.orgchart-edit-link) .orgchart-text{padding-right:44px}

/* Onboarding and offboarding checklists: rows that save on change, with
   their boxes in equal columns. */
.sec-check-row{display:grid;grid-template-columns:auto minmax(0,2fr) minmax(0,1fr) minmax(0,9rem) auto auto;gap:8px 12px;align-items:end;flex:1 1 100%;min-width:0;margin:0}
.sec-check-row > .form-errors,.sec-check-row > .form-error-summary{grid-column:1/-1}
.sec-check-row .field-line{margin:0;min-width:0}
.sec-check-row .field-line input,.sec-check-row .field-line select{width:100%;max-width:100%}
.sec-check-meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding-bottom:8px;min-width:0}
.sec-check-active{display:flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--text-light);padding-bottom:8px;white-space:nowrap}
@media(max-width:700px){.sec-check-row{grid-template-columns:auto minmax(0,1fr)}.sec-check-row > :not(.move-arrows){grid-column:2}}

/* Progress: one short row per person; what is left opens in a panel. */
.sec-progress{list-style:none;margin:0 0 16px;padding:0}
.sec-progress > li{display:grid;grid-template-columns:minmax(0,1fr) 7rem 9rem auto;gap:8px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sec-progress-name{font-weight:600;min-width:0;overflow-wrap:break-word}
.sec-progress .badge{justify-self:start}
@media(max-width:600px){.sec-progress > li{grid-template-columns:minmax(0,1fr) auto}}

/* Offboarding: "Last day" above its box, the row aligned at the bottom. */
.sec-start-row{align-items:flex-end}
.sec-stack-label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:.85rem}

/* Approvals: the chosen filter is dark, as filter buttons are elsewhere;
   "You're caught up." stands alone. */
.main nav[aria-label="Filter approvals"] a[aria-current="page"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary);box-shadow:none}

/* Training (Admin): certification types in even columns, labels above
   their boxes, Delete on a line of its own. */
.sec-type-row{display:grid;grid-template-columns:auto minmax(0,2fr) minmax(0,1.5fr) 8rem minmax(0,1.5fr) auto auto;gap:6px 10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line);margin:0}
.sec-type-row > .form-errors,.sec-type-row > .form-error-summary{grid-column:1/-1}
.sec-type-row .field-line{margin:0;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:.85rem}
.sec-type-row .field-line input{width:100%;max-width:100%;min-width:0}
.sec-type-active{display:flex;align-items:center;gap:.3rem;font-size:.85rem;padding-bottom:8px;white-space:nowrap}
.sec-type-delete{grid-column:2/-1;font-size:.85rem}
.sec-type-new{border-bottom:0}
@media(max-width:800px){.sec-type-row{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}.sec-type-delete{grid-column:1/-1}}

/* Deliverables: a wider Title box. */
.sec-wide-field{flex:2 1 22rem;min-width:0}
.sec-wide-field input{width:100%;max-width:100%}

/* Announcements: a date box (the portal's calendar) and a time box. */
.sec-datetime{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sec-datetime input[type="date"]{width:11rem;max-width:100%}
.sec-datetime input[type="time"]{width:8rem;max-width:100%}

/* A tick and its words on one line inside a stacked form. */
.form-grid label.sec-check-line{display:flex;flex-direction:row;align-items:center;gap:8px}

/* A plain button as tall as the boxes beside it (Contact form → Block). */
.form-row .sec-field-btn{align-self:stretch;min-height:0;padding-top:0;padding-bottom:0}
.sec-type-new > .move-arrows{display:block;width:26px}