:root {
  --navy:#192142; --navy-2:#273360; --red:#d9232e; --ink:#14213d; --muted:#66728b;
  --line:#dce2ee; --soft:#f4f6fa; --white:#fff; --green:#16806e; --gold:#bc7b17; --shadow:0 15px 36px rgba(20,33,61,.11);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
.hidden { display:none !important; }
body { margin:0; color:var(--ink); background:var(--soft); font-size:14px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.gate { min-height:100vh; display:grid; grid-template-columns:minmax(280px,.9fr) minmax(420px,1.1fr); background:#fff; }
.gate-brand { background:var(--navy); color:#fff; padding:56px max(8vw,40px); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; }
.gate-brand:after { content:""; position:absolute; width:460px; height:460px; border:80px solid rgba(255,255,255,.045); border-radius:50%; right:-210px; bottom:-200px; }
.wordmark { display:flex; align-items:center; gap:10px; font-size:28px; font-weight:900; letter-spacing:-1.5px; }
.wordmark img { display:block; width:230px; max-width:100%; height:auto; }
.wordmark .australia { width:30px; height:22px; background:var(--red); clip-path:polygon(0 55%,25% 28%,39% 30%,47% 0,60% 38%,75% 37%,100% 70%,78% 100%,44% 94%,25% 77%,6% 85%); display:inline-block; }
.wordmark small { display:block; color:#cfd7f4; font-size:11px; font-weight:600; letter-spacing:1.7px; text-transform:uppercase; }
.gate-brand h1 { max-width:510px; font-size:clamp(30px,4vw,52px); line-height:1.04; letter-spacing:-2px; margin:0 0 20px; position:relative; z-index:1; }
.gate-brand p { max-width:440px; color:#ccd5ef; font-size:16px; line-height:1.65; position:relative; z-index:1; }
.brand-caption { color:#bdc9ed; font-size:12px; position:relative; z-index:1; }
.auth-card { align-self:center; width:min(440px,calc(100% - 48px)); margin:auto; padding:48px 0; }
.auth-card h2 { margin:0 0 8px; font-size:29px; letter-spacing:-1px; }
.auth-card > p { color:var(--muted); margin:0 0 28px; line-height:1.55; }
.auth-help { align-items:center; color:var(--muted); display:flex; flex-wrap:wrap; font-size:12px; gap:8px; margin-top:17px; }
.text-button { background:none; border:0; color:var(--green); font-weight:760; padding:0; text-decoration:underline; text-underline-offset:3px; }
.text-button:hover { color:#0f6e5e; }
.shell { min-height:100vh; display:grid; grid-template-columns:248px 1fr; }
.sidebar { background:var(--navy); color:#fff; min-height:100vh; padding:24px 13px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.sidebar .wordmark { padding:0 10px 28px; }
.sidebar .wordmark img { width:184px; }
.nav-label { font-size:10px; color:#aebbe1; letter-spacing:1.3px; padding:9px 11px; text-transform:uppercase; }
.nav-button { display:flex; width:100%; border:0; background:transparent; color:#e7ebfa; text-align:left; padding:12px 13px; border-radius:8px; gap:11px; margin:2px 0; font-weight:650; }
.nav-button:hover { background:rgba(255,255,255,.09); }
.nav-button.active { background:#354166; box-shadow:inset 3px 0 0 var(--red); color:#fff; }
.nav-icon { width:18px; text-align:center; color:#cbd5f3; }
.sidebar-bottom { margin-top:auto; padding:14px 11px 2px; border-top:1px solid rgba(255,255,255,.13); color:#cdd7f3; font-size:12px; line-height:1.5; }
.workspace { min-width:0; }
.topbar { height:76px; padding:0 34px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; position:sticky; top:0; z-index:5; }
.topbar-title { font-weight:750; font-size:16px; }
.account { display:flex; align-items:center; gap:11px; }
.avatar { width:35px; height:35px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; }
.account-name { font-weight:720; font-size:13px; }
.account-role { color:var(--muted); font-size:11px; text-transform:capitalize; }
.quiet-button { padding:8px 10px; border:0; background:none; color:var(--muted); font-weight:650; }
.content { max-width:1450px; padding:34px; margin:auto; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:25px; }
.eyebrow { color:var(--red); letter-spacing:1.2px; text-transform:uppercase; font-size:10px; font-weight:800; margin:0 0 7px; }
.page-head h1 { font-size:29px; letter-spacing:-1px; margin:0; }
.page-head p { margin:7px 0 0; color:var(--muted); }
.primary,.secondary,.danger { border:0; border-radius:7px; padding:11px 15px; font-weight:760; }
.primary { background:var(--green); color:#fff; box-shadow:0 6px 13px rgba(22,128,110,.2); }
.primary:hover { background:#0f6e5e; }
.secondary { background:#fff; border:1px solid #cbd4e4; color:var(--ink); }
.danger { background:#fff1f2; color:#b5222a; }
.small { padding:7px 10px; font-size:12px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.metric { background:#fff; padding:19px; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 12px rgba(20,33,61,.03); }
.metric-label { color:var(--muted); font-weight:650; font-size:12px; }
.metric-value { font-size:32px; font-weight:820; letter-spacing:-1px; margin:7px 0 2px; }
.metric-note { font-size:11px; color:#8290ab; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:19px; }
.panel { border:1px solid var(--line); background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 5px 14px rgba(20,33,61,.035); }
.panel-head { padding:17px 19px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.panel-head h2 { font-size:15px; margin:0; }
.panel-head span { font-size:12px; color:var(--muted); }
.empty { padding:32px 22px; color:var(--muted); text-align:center; line-height:1.5; }
.filter-bar { padding:15px; border:1px solid var(--line); background:#fff; border-radius:10px; margin-bottom:16px; display:grid; grid-template-columns:1.7fr repeat(4,minmax(130px,1fr)) auto; gap:10px; }
.record-filter { grid-template-columns:repeat(4,minmax(150px,1fr)); }
.record-filter .filter-search { grid-column:span 2; }
.filter-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.filter-field label { color:#5c6984; font-size:10px; letter-spacing:.45px; text-transform:uppercase; }
.filter-field input,.filter-field select { min-width:0; padding:9px 10px; }
.filter-actions { align-items:end; display:flex; gap:8px; justify-content:flex-end; }
.filter-actions button { white-space:nowrap; }
.record-list-panel { margin-bottom:56px; overflow:visible; }
.table-scroll-shell { min-width:0; }
.table-scroll-access { align-items:center; background:#fbfcfe; border-bottom:1px solid var(--line); color:var(--muted); display:none; font-size:11px; gap:13px; padding:8px 15px 7px; }
.table-scroll-shell.has-horizontal-overflow .table-scroll-access { display:flex; }
.record-list-panel .table-scroll-access { border:1px solid var(--line); border-bottom:0; border-radius:9px 9px 0 0; bottom:0; box-shadow:0 -5px 14px rgba(20,33,61,.12); left:var(--table-scroll-left,0); position:fixed; width:var(--table-scroll-width,100%); z-index:10; }
.table-top-scroll { flex:1; height:16px; min-width:120px; overflow-x:auto; overflow-y:hidden; }
.table-top-scroll > div { height:1px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; text-align:left; }
th { color:#73809a; font-size:10px; letter-spacing:.8px; text-transform:uppercase; background:#fbfcfe; }
td,th { padding:13px 15px; border-bottom:1px solid #edf0f5; white-space:nowrap; }
td { font-size:13px; }
tbody tr.clickable { cursor:pointer; }
tbody tr.clickable:hover { background:#f7f9fd; }
tbody tr.closed-client-row { background:#e2e4e8; }
tbody tr.closed-client-row:hover { background:#d5d8dd; }
.person { font-weight:760; color:var(--ink); }
.person-link { background:none; border:0; cursor:pointer; padding:0; text-align:left; }
.person-link:hover { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.sub { display:block; margin-top:3px; color:var(--muted); font-size:11px; font-weight:500; }
.chip { display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; background:#edf1fa; color:#354166; font-size:11px; font-weight:750; margin:2px 3px 2px 0; white-space:normal; }
.chip.green { color:#08715f; background:#e6f5f0; }
.chip.gold { color:#85560c; background:#fff4df; }
.chip.red { color:#b31e2b; background:#ffeaed; }
.chip.blue { color:#2f5792; background:#eaf2ff; }
.service-link { border:0; cursor:pointer; }
.service-link:hover { background:#dce8f7; color:#1d4779; }
.row-link { border:0; padding:0; background:none; color:var(--green); font-weight:750; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.field { display:flex; min-width:0; flex-direction:column; gap:6px; }
.field.full { grid-column:1 / -1; }
label { font-size:12px; font-weight:750; color:#33405f; }
input,select,textarea { width:100%; border:1px solid #cbd4e2; background:#fff; color:var(--ink); border-radius:7px; padding:10px 11px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:#2b8f83; box-shadow:0 0 0 3px rgba(22,128,110,.11); }
textarea { min-height:94px; resize:vertical; line-height:1.45; }
.check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; border:1px solid #d4dbe7; padding:9px; border-radius:7px; }
.check { display:flex; align-items:center; gap:7px; color:#44516e; font-size:12px; font-weight:600; }
.check input { width:auto; accent-color:var(--green); }
.service-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.service-choice { align-items:flex-start; border:1px solid #e0e6ef; border-radius:7px; padding:10px; min-height:74px; }
.service-choice:hover { background:#f7fafc; border-color:#9dcfc5; }
.service-choice span { display:block; }
.service-choice b { display:block; color:var(--ink); font-size:12px; }
.service-choice small { display:block; color:var(--muted); font-size:11px; font-weight:500; line-height:1.35; margin-top:3px; }
.conversion-summary { background:#f4f7fc; border-left:3px solid var(--red); border-radius:5px; color:#465370; line-height:1.45; padding:11px 13px; }
.conversion-summary strong { color:var(--ink); display:block; font-size:13px; }
.conversion-summary span { font-size:12px; }
.coe-import-panel { background:linear-gradient(135deg,#f4faf9,#f6f8fd); border:1px solid #cfe3de; border-radius:10px; margin:0 0 22px; padding:17px; }
.coe-import-copy { align-items:flex-start; display:flex; gap:18px; justify-content:space-between; }
.coe-import-copy .eyebrow { margin-bottom:5px; }
.coe-import-copy h3 { font-size:15px; margin:0; }
.coe-import-copy p:not(.eyebrow) { color:#52617d; font-size:12px; line-height:1.5; margin:5px 0 0; max-width:630px; }
.private-badge { background:#e3f3ef; border-radius:999px; color:#0d7665; font-size:10px; font-weight:800; letter-spacing:.5px; padding:5px 8px; text-transform:uppercase; white-space:nowrap; }
.coe-import-controls { align-items:center; display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; }
.coe-import-controls input[type="file"] { background:#fff; flex:1 1 320px; font-size:12px; padding:8px; }
.coe-import-controls input[type="file"]::file-selector-button { background:#eaf2f0; border:0; border-radius:5px; color:#145e54; cursor:pointer; font:inherit; font-weight:750; margin-right:9px; padding:6px 8px; }
.coe-import-hint { color:#71809a; font-size:11px; margin:8px 0 0; }
.coe-import-status { background:#fff; border-radius:7px; color:#485670; display:none; font-size:12px; line-height:1.45; margin-top:12px; padding:10px 11px; }
.coe-import-status:not(:empty) { display:grid; gap:3px; }
.coe-import-status strong { color:#146b5e; font-size:12px; }
.coe-documents { margin:0; }
.document-list { display:grid; gap:0; }
.document-row { align-items:center; border-bottom:1px solid #e8edf4; display:flex; gap:12px; padding-right:16px; }
.document-row:last-child { border-bottom:0; }
.document-row .document-link { border-bottom:0; flex:1; min-width:0; }
.document-row .danger { flex:0 0 auto; }
.table-actions { align-items:center; display:flex; gap:8px; justify-content:flex-end; }
.document-link { align-items:center; border-bottom:1px solid #e8edf4; color:inherit; display:grid; gap:11px; grid-template-columns:auto minmax(0,1fr) auto; padding:13px 18px; text-decoration:none; }
.document-link:last-child { border-bottom:0; }
.document-link:hover { background:#f8fbfb; }
.document-icon { align-items:center; background:#fff0f1; border-radius:6px; color:#b32934; display:inline-flex; font-size:10px; font-weight:850; height:30px; justify-content:center; letter-spacing:.4px; width:35px; }
.document-link strong { display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.document-link small { color:var(--muted); display:block; font-size:11px; margin-top:3px; }
.document-link b { color:var(--green); font-size:12px; }
.empty.compact { padding:20px; }
.modal-backdrop { position:fixed; inset:0; background:rgba(16,26,53,.48); display:flex; align-items:center; justify-content:center; padding:22px; z-index:20; }
.modal { width:min(760px,100%); max-height:calc(100vh - 44px); overflow:auto; background:#fff; border-radius:13px; box-shadow:var(--shadow); }
.modal.large { width:min(930px,100%); }
.modal-head { padding:20px 22px 16px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; font-size:21px; letter-spacing:-.7px; }
.modal-head p { margin:6px 0 0; color:var(--muted); font-size:12px; }
.close { border:0; background:#f0f3f8; font-size:18px; width:30px; height:30px; border-radius:50%; color:#53617e; }
.modal-body { padding:21px 22px; }
.modal-actions { padding:14px 22px 21px; display:flex; justify-content:flex-end; gap:9px; border-top:1px solid var(--line); margin-top:20px; }
.case-list { display:grid; gap:12px; }
.case { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.case-top { padding:14px 16px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; background:#fcfdff; }
.case-title { font-weight:790; font-size:15px; }
.case-info { padding:15px 16px 3px; }
.case-fields { padding:0 16px 16px; }
.case-update-list { margin:12px 0 4px; border-top:1px dashed #dbe2ee; padding-top:12px; }
.update { padding:8px 0; color:#475471; font-size:12px; line-height:1.45; }
.update time { color:#8490a8; font-size:11px; display:block; margin-top:2px; }
.school-application-panel { border-top:1px solid #e5eaf2; background:#fbfcff; padding:16px; }
.school-application-head { align-items:flex-start; display:flex; gap:16px; justify-content:space-between; }
.school-application-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.school-application-head h3 { font-size:14px; margin:0; }
.school-application-head p { color:var(--muted); font-size:12px; margin:4px 0 0; }
.school-application-list { display:grid; gap:9px; margin-top:13px; }
.school-application-summary { align-items:center; background:#fff; border:1px solid #dfe6f0; border-radius:8px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; padding:14px; }
.school-application-fields { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:12px; min-width:0; }
.school-application-summary span { color:#74819a; display:block; font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.school-application-summary strong { display:block; font-size:12px; margin-top:4px; }
.school-application-summary small { color:var(--muted); display:block; font-size:11px; line-height:1.35; margin-top:3px; }
.school-application-pathway { border-left:1px solid #e4e8f0; padding-left:12px; }
.school-application-pathway p { color:#53617e; font-size:12px; line-height:1.45; margin:5px 0 0; white-space:pre-wrap; }
.school-application-notes { border-top:1px solid #e4e8f0; grid-column:1 / -1; padding-top:10px; }
.school-application-notes p { color:#53617e; font-size:12px; line-height:1.45; margin:5px 0 0; white-space:pre-wrap; }
.school-application-progress-action { align-self:center; justify-self:end; }
.school-application-empty { color:var(--muted); font-size:12px; margin:13px 0 2px; }
.school-application-entry { border:1px solid #dbe3ee; border-radius:9px; margin:0 0 15px; padding:16px; }
.school-entry-head { align-items:center; display:flex; justify-content:space-between; margin-bottom:14px; }
.school-entry-head h3 { font-size:14px; margin:0; }
.add-school-choice { margin-top:2px; }
.detail-head { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:18px; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.detail-head h2 { margin:0 0 5px; font-size:24px; }
.detail-meta { color:var(--muted); line-height:1.6; }
.back { border:0; background:none; color:var(--green); padding:0 0 12px; font-weight:760; }
.toast { position:fixed; right:22px; bottom:22px; background:var(--navy); color:#fff; padding:12px 15px; border-radius:8px; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; z-index:30; font-weight:650; max-width:360px; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.error { background:#a81c28; }
.inline-note { color:var(--muted); font-size:12px; margin:6px 0 0; }
.profile-panel { margin-bottom:25px; }
.profile-panel .panel-head > div { min-width:0; }
.profile-panel .panel-head h2 { margin-bottom:4px; }
.profile-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:4px 8px; }
.profile-summary > div { padding:17px 12px; border-right:1px solid #e7ebf2; min-width:0; }
.profile-summary > div:last-child { border-right:0; }
.profile-summary span { color:#71809a; display:block; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; margin-bottom:6px; }
.profile-summary strong { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-summary small { color:var(--muted); display:block; font-size:11px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-security-note { color:#697692; background:#f8fafc; border-top:1px solid #edf0f5; margin:0; padding:12px 18px; font-size:11px; line-height:1.5; }
.readonly-details-list { display:grid; gap:16px; }
.readonly-details .panel-head { align-items:flex-start; }
.readonly-details .panel-head h2 { margin-bottom:4px; }
.readonly-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:8px; }
.readonly-field { border-bottom:1px solid #e7ebf2; border-right:1px solid #e7ebf2; min-width:0; padding:14px 12px; }
.readonly-field:nth-child(3n) { border-right:0; }
.readonly-field span { color:#71809a; display:block; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.readonly-field strong { color:var(--ink); display:block; font-size:13px; font-weight:650; line-height:1.5; margin-top:6px; overflow-wrap:anywhere; white-space:pre-wrap; }
.basic-profile-form { padding-top:0; }
.profile-form-section { border-bottom:1px solid #e5eaf2; padding:23px 0; }
.profile-form-section:first-child { padding-top:22px; }
.profile-form-section:last-of-type { border-bottom:0; }
.profile-form-section h3 { font-size:16px; margin:0; letter-spacing:-.3px; }
.profile-form-section > div:first-child > p { color:var(--muted); font-size:12px; line-height:1.45; margin:5px 0 15px; }
.section-actions { display:flex; gap:9px; align-items:center; }
.application-progress-body { display:grid; gap:15px; }
.application-progress-card { border:1px solid #dce3ee; border-radius:10px; background:#fbfcff; overflow:hidden; }
.application-progress-head { align-items:flex-start; display:flex; justify-content:space-between; gap:14px; padding:16px 17px 12px; }
.application-progress-head h3 { font-size:15px; margin:0; }
.application-progress-head p,.other-service-progress > p { color:var(--muted); font-size:12px; line-height:1.5; margin:4px 0 0; }
.other-service-progress > p { border-top:1px solid #e5eaf2; margin:0; padding:12px 17px 15px; }
.progress-track { display:grid; grid-template-columns:repeat(6,minmax(92px,1fr)); padding:4px 17px 20px; overflow-x:auto; }
.progress-step { color:#8a95aa; min-width:92px; position:relative; text-align:center; }
.progress-step:not(:last-child)::after { background:#dfe5ee; content:""; height:2px; left:57%; position:absolute; top:13px; width:86%; z-index:0; }
.progress-step span { background:#fff; border:2px solid #cfd8e6; border-radius:50%; display:inline-grid; font-size:10px; font-weight:800; height:28px; place-items:center; position:relative; width:28px; z-index:1; }
.progress-step small { display:block; font-size:10px; font-weight:700; line-height:1.3; margin:6px auto 0; max-width:96px; }
.progress-step.done,.progress-step.active { color:#167a6a; }
.progress-step.done span { background:#e6f5f0; border-color:#16806e; }
.progress-step.done:not(:last-child)::after { background:#6db9aa; }
.progress-step.active span { background:#16806e; border-color:#16806e; color:#fff; box-shadow:0 0 0 4px rgba(22,128,110,.12); }
.progress-step.skipped { color:#a48a62; }
.progress-step.skipped span { background:#fff7e8; border-color:#e3c383; }
.progress-step.refused { color:#b4232e; }
.progress-step.refused span { background:#ffeaed; border-color:#d9232e; }
.progress-update { background:#fff; border-top:1px solid #e5eaf2; padding:14px 17px 17px; }
.progress-update > strong { font-size:12px; }
.progress-update p { color:var(--muted); font-size:11px; line-height:1.45; margin:4px 0 11px; }
.progress-actions { display:flex; flex-wrap:wrap; gap:7px; }
.progress-actions .secondary { font-size:11px; padding:7px 9px; }
.muted { color:var(--muted); }
.mobile-top { display:none; }
@media (max-width:1000px) { .metric-grid { grid-template-columns:repeat(2,1fr); } .two-col { grid-template-columns:1fr; } .filter-bar { grid-template-columns:1fr 1fr 1fr; } .record-filter .filter-search { grid-column:span 2; } .profile-summary { grid-template-columns:repeat(2,1fr); } .profile-summary > div:nth-child(2) { border-right:0; } .profile-summary > div:nth-child(-n+2) { border-bottom:1px solid #e7ebf2; } .school-application-summary { grid-template-columns:1fr 1fr; } }
@media (max-width:1000px) { .school-application-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1000px) { .readonly-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .readonly-field:nth-child(3n) { border-right:1px solid #e7ebf2; } .readonly-field:nth-child(2n) { border-right:0; } }
@media (max-width:720px) { .school-application-fields { grid-template-columns:1fr; } .school-application-progress-action { justify-self:start; } }
@media (max-width:720px) { .readonly-grid { grid-template-columns:1fr; } .readonly-field,.readonly-field:nth-child(3n),.readonly-field:nth-child(2n) { border-right:0; } }