/* Connect HR (owner's design of 2026-10-22): the dark 240px menu and the Cloud page, Manrope headings, Inter text,
   JetBrains Mono numbers. Colours come from /assets/epg-brand.css; a white label swaps them in after sign-in. */
.hr-body { background: var(--page); color: var(--ink); font-family: var(--f-body); }
.hr-shell { display: flex; min-height: 100vh; }
.hr-nav { width: 240px; flex: none; background: var(--chrome); color: #D7DBE2; padding: 16px 14px 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.hr-nav a, .hr-nav .hr-off { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: #D7DBE2; text-decoration: none; min-width: 0; }
.hr-nav a:hover { background: #3A3E44; color: #fff; }
.hr-nav a.on { color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); background: #33373C; }
.hr-nav .hr-off { color: #7E858D; cursor: default; }
.hr-nav .hr-off small { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6B7178; border: 1px solid #44484E; border-radius: 999px; padding: 1px 6px; }
.hr-back { font-size: 12px !important; color: var(--chrome-muted) !important; min-height: 28px !important; padding: 0 8px !important; }
.hr-back:hover { background: transparent !important; color: #fff !important; }
.hr-logo { display: flex; align-items: center; gap: 8px; padding: 4px 4px 18px 8px; }
.hr-logo img { height: 26px; width: auto; max-width: 96px; }
.hr-logo span { font-family: var(--f-head); font-weight: 800; font-size: 15px; color: #fff; white-space: nowrap; }
.hr-logo .hr-app { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.hr-logo .hr-app img { width: 26px; height: 26px; max-width: none; border-radius: 7px; flex: none; }
.hr-grp { display: flex; align-items: center; gap: 2px; }
.hr-grp a, .hr-grp .hr-off { flex: 1 1 auto; }
.hr-chev { width: 34px; height: 40px; border: 0; background: transparent; color: #A9B0B8; cursor: pointer; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hr-chev:hover { background: #3A3E44; color: #fff; }
.hr-chev svg { transition: transform .15s; }
.hr-chev.open svg { transform: rotate(90deg); }
.hr-sub { display: none; flex-direction: column; gap: 2px; }
.hr-sub.open { display: flex; }
.hr-sub a, .hr-sub .hr-off { padding-left: 28px; min-height: 32px; font-size: 13px; }
.hr-nav-foot { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid #3A3E44; font-size: 11px; color: var(--chrome-muted); display: flex; align-items: center; gap: 6px; }
.hr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; }

.hr-main { flex: 1 1 0; min-width: 0; padding: 20px 28px 60px; box-sizing: border-box; }
.hr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hr-crumb { display: block; font-size: 12px; color: var(--muted); }
.hr-top h1 { margin: 0; font-family: var(--f-head); font-size: 24px; font-weight: 800; }
.hr-topright { margin-left: auto; font-size: 13px; }
.hr-menu-btn { display: none; border: 0; background: var(--chrome); color: #fff; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; }
.hr-signin { max-width: 480px; margin: 8vh auto; }

.hr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.hr-tabs a { padding: 9px 14px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none; font-size: 14px; }
.hr-tabs a.on { color: var(--ink); border-bottom-color: var(--brand); }
.hr-tabs a .n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: var(--brand-on); font-size: 11px; text-align: center; margin-left: 4px; }

.hr-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hr-card h2 { margin: 0; font-family: var(--f-head); font-size: 16px; font-weight: 800; }
.hr-grid { display: grid; gap: 14px; align-items: start; }
.hr-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hr-grid.c32 { grid-template-columns: 3fr 2fr; }
.hr-grid.c23 { grid-template-columns: 2fr 3fr; }
.hr-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.hr-kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 1 1 150px; }
.hr-kpi small { font-size: 12px; color: var(--muted); }
.hr-kpi b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 24px; font-weight: 500; }
.hr-kpi b.warn { color: #B45309; }
.num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; }
.hr-muted { color: var(--muted); }
.hr-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #EEF0F3; font-size: 13px; }
.hr-row:first-of-type { border-top: 0; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.c-g { background: var(--brand-tint); color: var(--brand-ink); } .c-am { background: #FBE9C8; color: #6B4300; } .c-rd { background: #FADBD6; color: #8A2A1C; } .c-gr { background: #ECEEF1; color: #3F4756; } .c-bl { background: #D9E6F5; color: #163A66; }
.st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.st.in { background: var(--brand-ink); } .st.break { background: #E0A526; } .st.out { background: #A9B0B8; }
.hr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hr-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 8px; border-bottom: 2px solid #D7DBE2; white-space: nowrap; }
.hr-table td { padding: 8px; border-bottom: 1px solid #EEF0F3; vertical-align: middle; line-height: 1.4; }
.hr-table tr.me td { background: #FAFBFC; }
.hr-table a { color: var(--ink); font-weight: 600; text-decoration: none; }
.hr-table a:hover { color: var(--brand-ink); text-decoration: underline; }
.hr-scroll { overflow-x: auto; }
.hr-btn { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--brand); background: var(--brand); color: var(--brand-on); font: 600 13px var(--f-body); cursor: pointer; }
.hr-btn.o { background: #fff; color: var(--ink); border-color: var(--ink); }
.hr-btn.d { background: #FADBD6; color: #8A2A1C; border-color: #FADBD6; }
.hr-btn.s { height: 30px; font-size: 12px; padding: 0 10px; }
.hr-btn:disabled { background: #A9B0B8; border-color: #A9B0B8; color: #fff; cursor: not-allowed; }
.hr-input, .hr-select { font: 13px var(--f-body); padding: 7px 10px; border: 1px solid #D7DBE2; border-radius: 8px; background: #fff; color: var(--ink); min-width: 0; }
label.hr-lab { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.hr-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pill { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #D7DBE2; background: #fff; color: #3F4756; font: 500 12px var(--f-body); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.pill.on { background: var(--brand); border-color: var(--brand); color: var(--brand-on); font-weight: 600; }
.hr-bar { height: 8px; border-radius: 999px; background: #ECEEF1; overflow: hidden; flex: 1; }
.hr-bar i { display: block; height: 100%; background: var(--chrome); }
.hr-bar i.ot { background: #B45309; }
.hr-punch { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; font-size: 12px; background: #fff; margin: 2px 4px 2px 0; }
.hr-punch.added { border-style: dashed; }
.hr-punch b { font-weight: 600; }
.hr-day { display: grid; grid-template-columns: 120px 1fr 90px; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid #EEF0F3; font-size: 13px; }
.hr-day.today { background: #FAFBFC; margin: 0 -8px; padding: 10px 8px; border-radius: 8px; }
.hr-note { background: #FBE9C8; color: #6B4300; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.hr-note.ok { background: var(--brand-tint); color: var(--brand-ink); }
.ok-note { background: var(--ok-bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; color: var(--ok); }

/* The person's own clock (the phone mockup, TimeClock.dc.html): a dark head with the time, a status card, the
   big button. On a wide screen it sits in a column beside the week. */
.hr-clock { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.hr-clock-head { background: var(--chrome); color: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.hr-clock-head small { font-size: 13px; color: var(--chrome-muted); }
.hr-clock-head b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 40px; font-weight: 500; line-height: 1; }
.hr-clock-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.hr-big { height: 60px; border-radius: 14px; border: 0; font: 700 17px var(--f-body); color: #fff; cursor: pointer; width: 100%; }
.hr-big.in { background: var(--brand-ink); } .hr-big.out { background: #8A2A1C; } .hr-big.brk { background: var(--chrome); }
.hr-big:disabled { background: #A9B0B8; cursor: not-allowed; }
.hr-sm { height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: 600 14px var(--f-body); color: var(--ink); cursor: pointer; flex: 1; }
.hr-sm:disabled { color: #A9B0B8; cursor: not-allowed; }
.hr-line { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid #EEF0F3; font-size: 14px; }

@media (max-width: 900px) {
  .hr-grid.c2, .hr-grid.c32, .hr-grid.c23 { grid-template-columns: 1fr; }
  .hr-day { grid-template-columns: 90px 1fr 70px; }
}
@media (max-width: 760px) {
  .hr-nav { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; transform: translateX(-100%); transition: transform .18s; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .hr-nav.open { transform: none; }
  .hr-menu-btn { display: inline-flex; }
  .hr-main { padding: 12px 12px 80px; }
  .hr-top h1 { font-size: 20px; }
  .hr-clock-head { padding: 14px 16px; }
}
/* Inside the OS (owner 2026-11-05): the OS rail holds the apps and Connect HR keeps its own section menu, drawn like the
   OS department panel next to the rail (16rem, the OS chrome colours, a title row over a line, an icon per item, the
   current item tinted green, chevrons pointing down) so moving between Residential and Connect HR reads as one menu.
   The way back, the EPG Connect logo and the footer go, because the OS is already around the page. Icons show only here. */
.hr-ic { display: none; flex: none; }
.embed-os .hr-back, .embed-os .hr-logo > img, .embed-os .hr-nav-foot { display: none; }
.embed-os .hr-nav { width: 256px; background: #2A2D31; border-right: 1px solid #3E434A; padding: 0 12px 16px; gap: 2px; }
.embed-os .hr-logo { margin: 0 -12px 6px; padding: 12px; border-bottom: 1px solid #3E434A; }
.embed-os .hr-logo .hr-app { font-size: 15px; font-weight: 600; color: #F5F6F8; gap: 8px; }
.embed-os .hr-logo .hr-app img { width: 18px; height: 18px; border-radius: 5px; }
.embed-os .hr-ic { display: block; }
.embed-os .hr-nav a { min-height: 32px; padding: 6px 10px; gap: 10px; border-radius: 6px; font-size: 14px; font-weight: 400; color: #A9B0B8; }
.embed-os .hr-nav a:hover, .embed-os .hr-chev:hover { background: #33373C; color: #F5F6F8; }
.embed-os .hr-nav a.on { box-shadow: none; background: rgba(18, 214, 107, .12); color: #F5F6F8; font-weight: 500; }
.embed-os .hr-nav a.on .hr-ic { color: #12D66B; }
.embed-os .hr-sub a { padding-left: 36px; min-height: 28px; font-size: 13px; }
.embed-os .hr-chev { width: 28px; height: 32px; border-radius: 6px; color: #A9B0B8; }
.embed-os .hr-chev svg { transform: rotate(90deg); }
.embed-os .hr-chev.open svg { transform: rotate(-90deg); }
.embed-os .hr-main { padding-top: 16px; }
/* The OS draws this menu next to its rail (the OS said so with epg:menu-hosted): the nav here goes. */
.embed-menu-hosted .hr-nav, .embed-menu-hosted .hr-menu-btn { display: none; }

/* Admin (hr/admin.js): the section menu on the left, the open section on the right; People and access as switches
   that wait in a bar until Save (owner's feedback of 2026-10-27). Every class here starts with hr-adm-. */
.hr-tabs:empty { display: none; }
.hr-adm-intro { margin: 0 0 14px; font-size: 13px; line-height: 1.5; max-width: 48rem; }
.hr-adm-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 16px; align-items: start; }
.hr-adm-menu { display: flex; flex-direction: column; gap: 12px; }
.hr-adm-grp { padding: 8px; gap: 2px; }
.hr-adm-g { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 12px 4px; }
.hr-adm-grp a, .hr-adm-off { min-height: 36px; padding: 0 12px; border-radius: 9px; font: 500 13px var(--f-body); color: var(--muted); display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.hr-adm-grp a:hover { background: #F0F2F5; color: var(--ink); }
.hr-adm-grp a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); background: #F5F6F8; }
.hr-adm-off { cursor: default; color: #8A9199; }
.hr-adm-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hr-adm-grp a .hr-adm-trunc { white-space: normal; padding: 6px 0; line-height: 1.3; }
.hr-adm-soon { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); flex: none; }
.hr-adm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hr-adm-mini { height: 18px; padding: 0 7px; font-size: 11px; margin-left: auto; }
.hr-adm-main { min-width: 0; }
.hr-adm-stack { display: flex; flex-direction: column; gap: 14px; }
.hr-adm-cardintro { font-size: 13px; line-height: 1.5; }
.hr-adm-bad { color: var(--bad); font-size: 13px; }
.hr-adm-warn { margin: 8px 0 0; font-size: 12px; color: #B45309; }
.hr-adm-sub { display: block; font-size: 11px; font-weight: 400; }
.hr-adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-adm-h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.hr-adm-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.hr-adm-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid #EEF0F3; }
.hr-adm-list li:first-child { border-top: 0; }
.hr-adm-form3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 10rem; gap: 10px; align-items: end; }
.hr-adm-form3.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hr-adm-form3.two .hr-adm-end { grid-column: 1 / -1; }
.hr-adm-span2 { grid-column: span 2; }
.hr-adm-end { display: flex; justify-content: flex-start; }
.hr-adm-formcol { display: flex; flex-direction: column; gap: 10px; }
.hr-adm-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.hr-adm-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hr-adm-chart { display: flex; flex-direction: column; gap: 12px; }
.hr-adm-node { display: inline-flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; background: #fff; min-width: 140px; max-width: 100%; box-sizing: border-box; }
.hr-adm-node b { font-size: 13px; }
.hr-adm-node span { font-size: 11px; color: var(--muted); }
.hr-adm-tree { list-style: none; margin: 6px 0 0 14px; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.hr-adm-tree > li { position: relative; }
.hr-adm-tree > li::before { content: ""; position: absolute; left: -14px; top: 20px; width: 12px; height: 2px; background: var(--line); }
.hr-adm-checkform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.hr-adm-checkout { margin-top: 16px; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.hr-adm-checkout p { margin: 0; }
.hr-adm-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hr-adm-btnlink { display: inline-flex; align-items: center; text-decoration: none; align-self: flex-start; }
.hr-adm-btnlink:hover { color: var(--ink); }

/* People and access */
.hr-adm-waitbar { position: sticky; top: 8px; z-index: 5; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: 0 2px 10px rgba(42, 45, 49, .06); }
.hr-adm-barrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hr-adm-barmsg { font-size: 12px; color: var(--muted); }
.hr-adm-barmsg.bad { color: var(--bad); }
.hr-adm-baract { margin-left: auto; display: flex; gap: 8px; }
.hr-adm-waiting { background: #FBE9C8; color: var(--ink); border-radius: 10px; padding: 10px 14px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.hr-adm-waiting > b { color: #6B4300; }
.hr-adm-waiting ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hr-adm-waiting li { display: flex; align-items: flex-start; gap: 8px; }
.hr-adm-waiting li.bad { color: #8A2A1C; }
.hr-adm-grow { flex: 1 1 auto; min-width: 0; }
.hr-adm-refused { display: block; font-size: 12px; font-weight: 600; }
.hr-adm-linkbtn { background: transparent; border: 0; padding: 0 4px; font: 600 12px var(--f-body); color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; flex: none; }
.hr-adm-why { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
.hr-adm-why .hr-input { flex: 1 1 200px; padding: 4px 8px; }
.hr-adm-banner { background: var(--chrome); color: #fff; border-radius: 12px; padding: 12px 16px; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.hr-adm-accgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.hr-adm-min { min-width: 0; }
.hr-adm-acc td { vertical-align: top; }
.hr-adm-acc td:first-child { min-width: 150px; }
.hr-adm-auto { font-size: 12px; min-width: 140px; max-width: 220px; }
.hr-adm-acc tr.hr-adm-sel td { background: #F3FBF6; }
.hr-adm-name { background: transparent; border: 0; padding: 0; font: 600 13px var(--f-body); color: var(--ink); cursor: pointer; text-align: left; }
.hr-adm-name:hover, .hr-adm-name[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
.hr-adm-cell { display: block; font-size: 10px; margin-top: 3px; line-height: 1.3; }
.hr-adm-cell.warn { color: #B45309; }
.hr-adm-foot { border-top: 1px solid var(--line); padding: 10px 16px; font-size: 12px; line-height: 1.5; }
.hr-adm-panel { gap: 12px; }
.hr-adm-panelhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hr-adm-lvls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.hr-adm-lvl { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.hr-adm-lvl.on { border-color: var(--brand); }
.hr-adm-lvl.dim { opacity: .8; }
.hr-adm-lvlhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.hr-adm-opt { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.hr-adm-opt.dis { opacity: .65; cursor: default; }
.hr-adm-tg { width: 44px; height: 26px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; position: relative; flex: none; display: inline-block; vertical-align: middle; }
.hr-adm-tg i { position: absolute; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.hr-adm-tg.on { background: var(--brand-ink); }
.hr-adm-tg.on i { right: 3px; }
.hr-adm-tg.off { background: #C9CFD8; }
.hr-adm-tg.off i { left: 3px; }
.hr-adm-tg.lock { background: var(--chrome); cursor: not-allowed; }
.hr-adm-tg.lock i { right: 3px; }
.hr-adm-tg[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }
.hr-adm-tg.pend { box-shadow: 0 0 0 3px #FBE9C8, 0 0 0 4px #B45309; }
.hr-adm-tg:focus-visible, .hr-adm-name:focus-visible, .hr-adm-linkbtn:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; }
@media (min-width: 1500px) {
  .hr-adm-accgrid { grid-template-columns: minmax(0, 1fr) 320px; }
  .hr-adm-panel { position: sticky; top: 96px; }
}
@media (max-width: 1100px) {
  .hr-adm-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hr-adm-layout { grid-template-columns: minmax(0, 1fr); }
  .hr-adm-off, .hr-adm-soononly { display: none; } /* on a phone the menu stacks above: only what can be opened */
  .hr-adm-grp { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hr-adm-g { width: 100%; }
  .hr-adm-form3, .hr-adm-form3.two { grid-template-columns: minmax(0, 1fr); }
  .hr-adm-span2 { grid-column: auto; }
}