/* Reviews design system (Jan 16.10, v2 17.10, v3 18.10 «Ett design»): one type scale, one button, one hairline, two layers,
   one page top, and the components every page is built from. V2 after «det flyter»: darker text, hairlines at 32 %, nothing
   under 13 px, tighter rows. V3: five text sizes (13/14/15/17/20) plus the page title (32, 26 on a phone) and big numbers
   (30); fields and buttons 40 px, 44 px on a phone; one back link with an SVG chevron; white cards lifted a hair off the grey
   page (Jan 18.10: «Alt er fortsatt veldig flatt»). Taken from the approved draft design/forenklet-app-2026-10-14. Every rule
   starts at #account so it beats the scoped element rules in the older sheets; those sheets go away page by page. Tokens
   carry the r- prefix because the older sheets define --ink and friends with other values. */
:root{--r-ink:#16181d;--r-text:#3d4049;--r-muted:#6b6f78;--r-line:rgba(16,24,40,.13);--r-line-strong:rgba(16,24,40,.22);
 --r-canvas:#f3f3f2;--r-panel:#fff;--r-soft:#f6f5f1;--r-hover:#fafaf8;--r-track:#eceae4;
 --r-yellow:#f9ab00;--r-red:#d93025;--r-green:#1e8e3e;--r-blue:#1a73e8;
 /* One palette for tiles and pills (Jan 18.10: «gjør det skikkelig bra»), three steps per colour as on Hjem: 3 a light tone,
    9 the colour, 11 the deep tone for text and icons on the light tone. Red only for what is urgent; reviews amber, a quiet
    profile orange, customers and what runs green, Google blue, advice violet, the business and what is off grey. */
 --r-red-3:#feebec;--r-red-9:#e5484d;--r-red-11:#ce2c31;--r-orange-3:#ffefd6;--r-orange-9:#f76b15;--r-orange-11:#cc4e00;
 --r-amber-3:#fff7c2;--r-amber-9:#ffc53d;--r-amber-11:#ab6400;--r-green-3:#e6f6eb;--r-green-9:#30a46c;--r-green-11:#218358;
 --r-blue-3:#e6f4fe;--r-blue-9:#0090ff;--r-blue-11:#0d74ce;--r-violet-3:#f4f0fe;--r-violet-9:#6e56cf;--r-violet-11:#6550b9;
 --r-grey-3:#eef0f2;--r-grey-9:#8b8d98;--r-grey-11:#60646c;
 --r-purple:var(--r-violet-9);--r-grey-soft:var(--r-grey-3);--r-red-soft:var(--r-red-3);--r-yellow-soft:var(--r-amber-3);--r-green-soft:var(--r-green-3);--r-blue-soft:var(--r-blue-3);--r-purple-soft:var(--r-violet-3);
 --r-font:Geist,Arial,sans-serif;--r-radius:12px;--r-radius-s:8px;
 --r-fs-small:13px;--r-fs-meta:14px;--r-fs-ui:14px;--r-fs-body:15px;--r-fs-lead:17px;--r-fs-title:20px;--r-fs-h1:32px;--r-fs-big:30px;
 --r-control:40px;
 /* Depth (Jan 18.10: «Alt er fortsatt veldig flatt»): white cards lift a hair off the grey page; what can be pressed lifts a
    little more under the pointer and settles when pressed. */
 --r-lift:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);--r-lift-hover:0 4px 12px rgba(16,24,40,.08),0 1px 3px rgba(16,24,40,.05);
 --r-lift-btn:0 1px 1px rgba(16,24,40,.04);--r-lift-primary:0 1px 2px rgba(16,24,40,.18),inset 0 1px 0 rgba(255,255,255,.08);--r-ease:.14s ease}

/* Page */
#account .r-page{max-width:1064px;margin:0 auto;padding:28px 32px 64px;color:var(--r-ink);font:var(--r-fs-body)/1.5 var(--r-font);-webkit-font-smoothing:antialiased}
#account .r-page *,#account .r-page *::before,#account .r-page *::after{box-sizing:border-box}
#account .r-page :where(button,input,select,textarea){font:inherit;color:inherit}
/* The older dark buttons (Synlighet › Tiltak) keep white text: the line above outranks their own colour. */
#account .r-page .v-button.primary{color:#fff}
#account .r-hello{margin:0;color:var(--r-muted);font-size:var(--r-fs-body)}
#account .r-page .r-h1,#account .r-h1{margin:4px 0 16px;color:var(--r-ink);font:650 var(--r-fs-h1)/1.25 var(--r-font);letter-spacing:-.7px}
/* The top of every sub-page: the page it belongs to as a back link with a chevron, then the title. The section's own heading
   and tabs give way to it (pilot-shell.css), so a page never stacks two titles. */
#account .r-top{display:block;margin:0 0 24px}
#account .r-top .r-h1,#account .r-page .r-top .r-h1{margin:0}
#account .r-top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
#account .r-top-row>.r-h1{min-width:0}
#account .r-top-row>:not(.r-h1){flex:none}
#account .r-top>.r-sub{margin:4px 0 0;color:var(--r-muted);font-size:var(--r-fs-body);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#account .r-top>.r-sub:empty{display:none}
#account .r-back{display:flex;align-items:center;gap:4px;width:max-content;max-width:100%;height:24px;min-height:0;margin:0 0 8px -2px;padding:0 4px 0 0;border:0;border-radius:6px;background:none;color:var(--r-muted);font:500 var(--r-fs-ui)/1 var(--r-font);white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:none}
#account .r-back:hover{color:var(--r-ink);background:none}
#account .r-back:focus-visible{outline:2px solid var(--r-ink);outline-offset:2px}
#account .r-back svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#account .r-section{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:36px 0 12px}
#account .r-page .r-section h2,#account .r-section h2{margin:0;color:var(--r-ink);font:650 var(--r-fs-lead)/1.5 var(--r-font);letter-spacing:-.25px}
#account .r-section small{color:var(--r-muted);font-size:13px;white-space:nowrap}
#account .r-note{margin:0;color:var(--r-muted);font-size:var(--r-fs-ui)}
#account .r-label{color:var(--r-muted);font-size:13px;white-space:nowrap}
#account .r-kicker{display:block;color:var(--r-muted);font-size:13px}
#account .r-hide-m{display:inline}
/* A component that is hidden stays hidden, whatever display it has. */
#account :is(.r-btn,.r-link,.r-back,.r-card,.r-empty,.r-pill,.r-field,.r-actions,.r-top)[hidden]{display:none}

/* Icons: SVG strokes, never text arrows. Stars are the only filled icon and the only yellow. */
#account .r-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#account .r-star{width:14px;height:14px;color:var(--r-yellow);fill:currentColor;stroke:none;flex:none}
#account .r-stars{display:inline-flex;gap:1px}
#account .r-stars .r-star{width:14px;height:14px}

/* Card: the white layer on the page, with a hairline. */
#account .r-card{border:.5px solid var(--r-line-strong);border-radius:var(--r-radius);background:var(--r-panel);overflow:hidden;box-shadow:var(--r-lift)}
/* A card that is itself the thing to press lifts under the pointer. */
#account :is(a,button).r-card{transition:box-shadow var(--r-ease),transform var(--r-ease);cursor:pointer}
#account :is(a,button).r-card:hover{box-shadow:var(--r-lift-hover);transform:translateY(-1px)}
#account :is(a,button).r-card:active{box-shadow:var(--r-lift);transform:none}
/* Rows that open something answer the pointer: a light tone on hover, a deeper one while pressed. */
#account :is(button.r-row,a.r-row,.cu-row,.rv-row,.syn-svc,.support-ticket,.pe-result,.pe-option,.pe-service-main,.gp-row,.gp-item){transition:background-color var(--r-ease)}
#account :is(button.r-row,a.r-row):hover{background:var(--r-hover)}
#account .r-card :is(button.r-row,a.r-row,.cu-row,.rv-row,.syn-svc,.support-ticket,.pe-result,.pe-option,.gp-row,.gp-item):active{background:var(--r-soft)}
#account .r-card.r-dark{background:var(--r-ink);border-color:var(--r-ink);color:#fff}
/* Empty: what is missing, 4 px, one line, 16 px, at most one button. */
#account .r-empty{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:20px}
#account .r-empty>:is(b,h2,h3){margin:0;color:var(--r-ink);font:600 var(--r-fs-body)/1.5 var(--r-font)}
#account .r-empty p{margin:0;color:var(--r-text);font-size:var(--r-fs-ui);line-height:1.5}
#account .r-empty>*+p{margin-top:4px}
#account .r-empty>:is(.r-btn,.r-actions,.r-link){margin-top:16px}
#account .r-empty b{font-weight:600}

/* Button: one style. Primary is ink. */
#account .r-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--r-control);min-height:0;margin:0;padding:0 16px;border:.5px solid var(--r-line-strong);border-radius:var(--r-radius-s);
 background:var(--r-panel);color:var(--r-ink);font:500 var(--r-fs-body)/1 var(--r-font);white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:var(--r-lift-btn);transition:background-color var(--r-ease),border-color var(--r-ease),box-shadow var(--r-ease)}
#account .r-btn:hover{background:var(--r-hover);border-color:rgba(16,24,40,.3)}
#account .r-btn:active:not(:disabled){background:var(--r-soft);box-shadow:none}
#account .r-btn:focus-visible{outline:2px solid var(--r-ink);outline-offset:2px}
#account .r-btn.primary{background:var(--r-ink);border-color:var(--r-ink);color:#fff;box-shadow:var(--r-lift-primary)}
#account .r-btn.primary:hover{background:#000;border-color:#000}
#account .r-btn.primary:active:not(:disabled){background:#2b2e36;box-shadow:none}
#account .r-btn:disabled{box-shadow:none}
#account .r-btn.small{height:34px;padding:0 12px;font-size:14px}
#account .r-btn:disabled{opacity:.5;cursor:default}
#account .r-btn .r-icon{width:16px;height:16px}
#account .r-dark .r-btn{background:#fff;border-color:#fff;color:var(--r-ink);font-weight:600}
/* Google's button (Natt 2, 19.10): one name and one look wherever Kari connects to Google, «Koble til Google», as on Hjem.
   Google's own G stands before the words: on a small white disc on the black main button, on its own on a white button. */
#account .r-btn.r-google{--r-g:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Cpath%20fill='%23EA4335'%20d='M24%209.5c3.54%200%206.71%201.22%209.21%203.6l6.85-6.85C35.9%202.38%2030.47%200%2024%200%2014.62%200%206.51%205.38%202.56%2013.22l7.98%206.19C12.43%2013.72%2017.74%209.5%2024%209.5z'/%3E%3Cpath%20fill='%234285F4'%20d='M46.98%2024.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58%202.96-2.26%205.48-4.78%207.18l7.73%206c4.51-4.18%207.09-10.36%207.09-17.65z'/%3E%3Cpath%20fill='%23FBBC05'%20d='M10.53%2028.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92%2016.46%200%2020.12%200%2024c0%203.88.92%207.54%202.56%2010.78l7.97-6.19z'/%3E%3Cpath%20fill='%2334A853'%20d='M24%2048c6.48%200%2011.93-2.13%2015.89-5.81l-7.73-6c-2.15%201.45-4.92%202.3-8.16%202.3-6.26%200-11.57-4.22-13.47-9.91l-7.98%206.19C6.51%2042.62%2014.62%2048%2024%2048z'/%3E%3C/svg%3E")}
#account .r-btn.r-google::before{content:"";flex:none;width:16px;height:16px;background:var(--r-g) center/16px no-repeat}
#account .r-btn.primary.r-google::before{width:20px;height:20px;margin-left:-4px;border-radius:50%;background:#fff var(--r-g) center/13px no-repeat}
#account .r-link{display:inline-flex;align-items:center;gap:4px;min-height:0;margin:0;padding:0;border:0;background:none;color:var(--r-ink);font:500 14px/1.4 var(--r-font);white-space:nowrap;cursor:pointer;text-decoration:none}
#account .r-link:hover{text-decoration:underline;text-underline-offset:3px}
#account .r-link :is(.r-icon,svg){width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#account .r-pill{min-width:0;min-height:0;margin:0;padding:5px 11px;border:.5px solid var(--r-line-strong);border-radius:999px;background:var(--r-panel);color:var(--r-ink);font:13px/1.4 var(--r-font);cursor:pointer;transition:background-color var(--r-ease),border-color var(--r-ease)}
#account .r-pill:hover{border-color:rgba(16,24,40,.34)}
#account .r-pill[aria-pressed=true]{background:var(--r-ink);border-color:var(--r-ink);color:#fff}

/* Field: label above, 40 px control (44 px on a phone), ink focus ring. White on white cards and on the grey page. */
#account .r-field{display:block;margin:0;min-width:0}
#account .r-field>span{display:block;margin-bottom:5px;color:var(--r-text);font-size:var(--r-fs-meta);white-space:nowrap}
#account .r-field :is(input,select,textarea){width:100%;height:var(--r-control);min-height:0;margin:0;padding:0 12px;border:.5px solid var(--r-line-strong);border-radius:var(--r-radius-s);background:var(--r-panel);color:var(--r-ink);font:var(--r-fs-body)/1.4 var(--r-font);box-shadow:none;appearance:none;-webkit-appearance:none}
#account .r-field textarea{height:auto;min-height:96px;padding:10px 12px;line-height:1.5;resize:vertical;field-sizing:content}
#account .r-field>small{display:block;margin-top:5px;color:var(--r-muted);font-size:var(--r-fs-small);line-height:1.45}
#account .r-field input::placeholder,#account .r-field textarea::placeholder{color:#8a8e96}
#account .r-field select{padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
#account .r-field :is(input,select,textarea):focus{outline:2px solid var(--r-ink);outline-offset:-1px}
#account .r-field input[aria-invalid=true]{outline:2px solid var(--r-red);outline-offset:-1px}
#account .r-dark .r-field>span{color:rgba(255,255,255,.75)}
#account .r-dark .r-field :is(input,select){border-color:transparent}
#account .r-dark .r-field :is(input,select):focus{outline-color:var(--r-yellow)}

/* Form layout: fields stacked, buttons in a row, a checkbox with its words, a card body. */
#account .r-form{display:grid;gap:14px;min-width:0}
#account .r-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#account .r-check{display:inline-flex;align-items:flex-start;gap:10px;margin:0;min-height:0;color:var(--r-ink);font-size:var(--r-fs-ui);line-height:1.4;cursor:pointer}
#account .r-check input{width:18px;height:18px;min-height:0;margin:1px 0 0;flex:none;accent-color:var(--r-ink)}
#account .r-pad{padding:16px 18px}

/* Switch: a real setting with two states. */
#account .r-switch{position:relative;flex:none;width:40px;height:24px;min-height:0;margin:0;padding:0;border:0;border-radius:12px;background:#c6c8cc;cursor:pointer;transition:background .15s}
#account .r-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
#account .r-switch[aria-checked=true]{background:var(--r-ink)}
#account .r-switch[aria-checked=true]::after{left:19px}
#account .r-switch:disabled{opacity:.45;cursor:default}
/* Details: a line that opens more, written like a link. */
#account .r-details>summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;list-style:none;color:var(--r-ink);font:500 var(--r-fs-ui)/1.4 var(--r-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#account .r-details>summary::-webkit-details-marker{display:none}
#account .r-details>summary::marker{content:""}
#account .r-details>:not(summary){margin-top:8px}
/* Table: hairlines between rows, numbers lined up. */
#account .r-table{width:100%;border-collapse:collapse;font-size:var(--r-fs-meta)}
#account .r-table th{text-align:left;color:var(--r-muted);font-weight:500}
#account .r-table :is(td,th){padding:10px 12px;border-bottom:.5px solid var(--r-line)}
#account .r-table tr:last-child td{border:0}
#account .r-table td:nth-child(n+2){font-variant-numeric:tabular-nums}
#account .r-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* List row: number or initials, who, action. */
#account .r-list{list-style:none;margin:0;padding:0}
#account .r-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 18px}
#account .r-row+.r-row{border-top:.5px solid var(--r-line)}
#account .r-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--r-ink);color:#fff;font:600 var(--r-fs-ui)/1 var(--r-font)}
#account .r-initials{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#f1f1ef;color:var(--r-text);font:600 var(--r-fs-meta)/1 var(--r-font);flex:none}
#account .r-who{min-width:0}
#account .r-who>b,#account .r-who>button{display:block;color:var(--r-ink);font:600 var(--r-fs-body)/1.5 var(--r-font);letter-spacing:-.1px}
#account .r-who>button{min-height:0;margin:0;padding:0;border:0;background:none;text-align:left;cursor:pointer}
#account .r-who>button:hover{text-decoration:underline;text-underline-offset:3px}
#account .r-meta{display:flex;align-items:center;gap:8px;margin-top:2px;color:var(--r-muted);font-size:13px;white-space:nowrap;overflow:hidden}
#account .r-quote{margin:4px 0 0;color:var(--r-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#account .r-row .r-btn{min-width:130px}

/* Status: a pill in the colour of what it means (Jan 18.10: «VI MÅ HA MER FARGER»). Grey for what is off or done, green
   for what runs, yellow for what waits, red only for what needs you. Always one line. */
#account .r-status{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;height:22px;padding:0 9px;border-radius:999px;background:var(--r-grey-soft);color:var(--r-text);font:500 var(--r-fs-small)/22px var(--r-font);white-space:nowrap}
#account .r-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--r-grey-9);flex:none}
#account .r-status.call{background:var(--r-red-3);color:var(--r-red-11);font-weight:600}
#account .r-status.call::before{background:var(--r-red-9)}
#account .r-status.queued{background:var(--r-green-3);color:var(--r-green-11)}
#account .r-status.queued::before{background:var(--r-green-9)}
#account .r-status.wait{background:var(--r-amber-3);color:var(--r-amber-11)}
#account .r-status.wait::before{background:var(--r-amber-9)}
#account .r-status.review{background:none;padding:0;color:var(--r-ink)}
#account .r-status.review::before{display:none}
/* Tile in front of a row, as on Hjem: the light tone with the icon in the deep tone and a hairline in the colour. The one
   row that matters most gets .solid: the colour itself with a white icon. Each kind of thing keeps its colour app-wide. */
#account .r-tile{--t3:var(--r-grey-3);--t9:var(--r-grey-9);--t11:var(--r-grey-11);display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--t3);color:var(--t11);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--t9) 40%,transparent)}
#account .r-tile :is(svg,.r-icon){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#account .r-tile.red{--t3:var(--r-red-3);--t9:var(--r-red-9);--t11:var(--r-red-11)}
#account .r-tile.orange{--t3:var(--r-orange-3);--t9:var(--r-orange-9);--t11:var(--r-orange-11)}
#account .r-tile:is(.amber,.yellow){--t3:var(--r-amber-3);--t9:var(--r-amber-9);--t11:var(--r-amber-11)}
#account .r-tile.green{--t3:var(--r-green-3);--t9:var(--r-green-9);--t11:var(--r-green-11)}
#account .r-tile.blue{--t3:var(--r-blue-3);--t9:var(--r-blue-9);--t11:var(--r-blue-11)}
#account .r-tile:is(.violet,.purple){--t3:var(--r-violet-3);--t9:var(--r-violet-9);--t11:var(--r-violet-11)}
#account .r-tile.solid{background:var(--t9);color:#fff;box-shadow:none}

/* Tabs: underline, no boxes. */
#account .r-tabs{display:flex;gap:4px;margin:0 0 18px;border-bottom:.5px solid var(--r-line)}
#account .r-tabs>*{min-height:0;margin:0 0 -.5px;padding:8px 12px 10px;border:0;border-bottom:2px solid transparent;background:none;color:var(--r-muted);font:var(--r-fs-ui)/1.4 var(--r-font);white-space:nowrap;cursor:pointer;text-decoration:none}
#account .r-tabs>[aria-current]{color:var(--r-ink);font-weight:500;border-bottom-color:var(--r-ink)}

/* Big number */
#account .r-kpi{display:flex;flex-direction:column;gap:2px;min-width:0;padding:16px 20px}
#account .r-kpi+.r-kpi{border-left:.5px solid var(--r-line)}
#account .r-kpi>span{color:var(--r-muted);font-size:var(--r-fs-meta);white-space:nowrap}
#account .r-kpi b{display:inline-flex;align-items:center;gap:8px;color:var(--r-ink);font:700 var(--r-fs-big)/1.2 var(--r-font);letter-spacing:-.6px;white-space:nowrap;font-variant-numeric:tabular-nums}
#account .r-kpi b .r-star{width:20px;height:20px}
#account .r-kpi small{color:var(--r-muted);font-size:13px;white-space:nowrap}

/* Sheet: the drawer that slides in from the right on PC and fills the screen on a phone. Head, scrolling body, foot. */
#account .r-scrim{position:fixed;inset:0;background:rgba(16,24,40,.2);z-index:1900}
#account .r-sheet{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);display:flex;flex-direction:column;background:var(--r-panel);border-left:.5px solid var(--r-line-strong);box-shadow:-12px 0 32px rgba(16,24,40,.08);color:var(--r-ink);font:var(--r-fs-body)/1.5 var(--r-font);z-index:2000}
#account .r-sheet *,#account .r-sheet *::before,#account .r-sheet *::after{box-sizing:border-box}
#account .r-sheet :where(button,input,select,textarea){font:inherit;color:inherit}
#account .r-sheet-head{display:flex;align-items:flex-start;gap:8px;padding:18px 20px 14px;border-bottom:.5px solid var(--r-line)}
#account .r-sheet-head>div{flex:1;min-width:0}
#account .r-sheet-head h2,#account #workspace-content .r-sheet-head h2{margin:0;color:var(--r-ink);font:600 var(--r-fs-title)/1.3 var(--r-font);letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#account .r-sheet-head h2:focus{outline:none}
#account .r-sheet-head .r-meta{margin-top:2px}
#account .r-iconbtn{display:grid;place-items:center;width:36px;height:36px;min-height:0;margin:0;padding:0;border:.5px solid var(--r-line-strong);border-radius:var(--r-radius-s);background:var(--r-panel);color:var(--r-ink);cursor:pointer;flex:none;text-decoration:none}
#account .r-iconbtn:hover{background:var(--r-hover)}
#account .r-sheet-body{flex:1;min-height:0;overflow:auto;padding:18px 20px}
#account .r-sheet-foot{display:flex;gap:8px;padding:14px 20px;border-top:.5px solid var(--r-line)}
#account .r-sheet-foot .r-btn{flex:1}

@media (prefers-reduced-motion:reduce){#account :is(a,button).r-card:hover{transform:none}}
@media (max-width:820px){
 /* The shell already gives the page its 16 px gutter on a phone, and ends the page 16 px above the menu. */
 :root{--r-control:44px}
 #account .r-page{padding:12px 0 0}
 #account .r-page .r-h1,#account .r-h1{font-size:26px;letter-spacing:-.4px}
 #account .r-top{margin-bottom:20px}
 #account .r-back{height:28px}
 #account .r-hide-m{display:none}
 #account .r-field :is(input,select){font-size:16px}
 #account .r-row{grid-template-columns:28px minmax(0,1fr);gap:12px;padding:14px 16px}
 #account .r-row>.r-btn{grid-column:2;justify-self:start;min-width:0}
 #account .r-quote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}
 #account .r-kpi{padding:14px 16px}
 #account .r-kpi+.r-kpi{border-left:0;border-top:.5px solid var(--r-line)}
}

.customer-onboarding-progress{display:flex;gap:12px 24px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 28px;color:#5f6368;font-size:14px}
.customer-onboarding-progress [aria-current=step]{color:#202124;font-weight:600;border-bottom:2px solid #202124;padding-bottom:8px}
.customer-onboarding-heading{margin-bottom:24px}.customer-onboarding-heading>p{margin:0 0 8px}.customer-onboarding-heading h1{margin:0}
.customer-onboarding-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0}
.customer-onboarding-content .profile-page-head{display:none}.customer-onboarding-content .gp-root{margin:0}