/*
  The account-settings shell (owner, 2026-11-10: "the SAME UI the rest of the console uses"): the left list of sections
  (icon, title, one line) and one panel beside it; on a phone the list is its own screen and a row opens one panel
  with a Back link. Moved out of account.html so the driver's Account (account.js showPanel) and the partner desk's
  Settings (partner.js settingsView) share one set of rules. Field and pane styles live here too.
*/
.acct-layout { display: grid; grid-template-columns: 224px minmax(0,1fr);
  grid-template-areas: "menu body"; gap: 0 40px; align-items: start; align-content: start; }
.acct-menu { grid-area: menu; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 78px; }
.acct-body { grid-area: body; }
.acct-menu-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px;
  border-radius: 8px; color: var(--dim); text-decoration: none; font-size: 14px; font-weight: 500; }
.acct-menu-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acct-menu-item:hover { color: var(--text); background: var(--card); }
.acct-menu-item[aria-current="page"] { color: var(--text); background: var(--raised-2); font-weight: 500; }
/* Dim like its neighbours; the gap and rule below carry the separation, and
   red arrives on hover and in the confirmation dialog. */
.acct-menu-danger:hover, .acct-menu-danger[aria-current="page"] { color: var(--red); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--dim); }
.field input, .field select, #acct-lang { background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font: inherit; font-size: 14.5px; padding: 9px 12px; min-height: 40px; max-width: 420px; }
.field input:focus, #acct-lang:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }

.acct-menu-group { font-size: 13px;
  color: var(--dim); font-weight: 500; margin: 0; padding: 14px 10px 6px; }
.acct-menu-group:first-child { padding-top: 4px; }
.acct-menu-set { display: flex; flex-direction: column; gap: 2px; }
/* Delete is pushed clear of the routine rows by a rule and a gap — the
   separation does the work that red text alone was doing. */
.acct-menu-end { margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--line); }

.acct-panel[hidden] { display: none !important; }

.acct-pane-h { margin: 0 0 18px; }
.acct-subhead { margin: 0 0 4px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.acct-pane-desc { margin: 0; font-size: 14px; color: var(--dim); }
/* Form panels are one column of fields; 560 is the mock's card width. The
   Subscription panel holds a plan grid and keeps the full pane. */
.acct-panel { max-width: 560px; padding: 18px 18px 16px; }

@media (min-width: 821px) {
  main.acct-layout { padding-top: 36px; grid-template-columns: 220px minmax(0, 760px); gap: 40px; }
  .acct-menu { top: 36px; }
  .acct-menu-item { color: var(--side-ink); font-weight: 500; height: 36px; }
  .acct-menu-item:hover { color: var(--side-ink-strong); background: color-mix(in srgb, var(--side-ink) 7%, transparent); }
  .acct-menu-item[aria-current="page"] { color: var(--side-ink-strong); background: var(--card); font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--side-active-line); }
  .acct-menu-group { color: var(--side-muted); font-weight: 500; }
  .acct-pane-h { margin-bottom: 8px; }
  .acct-subhead { font-size: 28px; font-weight: 400; letter-spacing: -.02em; margin: 0 0 4px; }
  .acct-pane-desc { font-size: 15px; color: var(--dim); margin: 0; }
  .acct-panel.card { border-color: transparent; border-radius: 14px; padding: 24px; }
}


.acct-menu-title { margin: 0 0 8px; padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--dim); }
.acct-menu-item { height: auto; min-height: 44px; padding: 8px 10px; gap: 12px; align-items: center; }
.acct-row-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--raised-2); color: var(--text); }
.acct-row-ico svg { width: 17px; height: 17px; }
.acct-row-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.acct-row-txt b { font-weight: 500; font-size: 14.5px; color: var(--text); }
.acct-row-txt span { font-size: 12.5px; color: var(--dim); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-row-chev { width: 16px; height: 16px; flex: none; color: var(--dim); opacity: .7; }
.acct-menu-danger .acct-row-ico { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.acct-menu-danger .acct-row-txt b { color: var(--red); }
.acct-back { display: none; align-items: center; gap: 6px; min-height: 44px; margin: -8px 0 4px; color: var(--accent);
  text-decoration: none; font-weight: 500; font-size: 14.5px; width: max-content; }
.acct-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 820px) {
  .acct-layout { grid-template-columns: minmax(0,1fr); grid-template-areas: "menu" "body"; gap: 14px; }
  .acct-menu { position: static; flex-direction: column; gap: 0; }
  .acct-menu-set, .acct-menu-end { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden; }
  .acct-menu-set > .acct-menu-item + .acct-menu-item { border-top: 1px solid var(--line-soft); }
  .acct-menu-end { margin-top: 14px; }
  .acct-menu-item { border-radius: 0; min-height: 60px; padding: 10px 14px; color: var(--text); }
  .acct-menu-item[aria-current="page"] { background: none; }
  body.acct-at-list .acct-body { display: none; }
  body:not(.acct-at-list) .acct-menu { display: none; }
  body:not(.acct-at-list):not(.acct-top) .acct-back { display: inline-flex; }
  .acct-subhead { font-size: 22px; font-weight: 500; }
}


@media (min-width: 821px) {
  main.acct-layout { grid-template-columns: 270px minmax(0, 760px); }
  .acct-menu-item { min-height: 52px; }
  body.acct-top main.acct-layout { grid-template-columns: minmax(0, 760px); grid-template-areas: "body"; }
  body.acct-top .acct-menu { display: none; }
  body.acct-top .acct-panel { max-width: 760px; }
}