/* Settings (ui/settings.js). Page-specific rules only: shared tokens and components live in app.css (owned by the shell helper).
   Wave's Settings layout (survey, "Settings"): a list of settings pages at the left (about 230px, heading "Settings"), the page to its right.
   The list sits beside the page only when there is room for both: that is decided by the width of the settings area itself (a container query on
   .set), not by the width of the window, because the shell's own sidebar and gutters take a different share of every window. Narrower than that
   (a phone, or a half-width window) the list becomes a wrapped row of pills above the page. Cards are the shared .panel (white, 12px radius).
   Nothing here moves on a keyboard action; presses shrink to .97 and hover only counts on a real pointer. */
.set-root,.set-body{display:contents}
.set-root h1:focus-visible{outline:none}   /* a heading takes the keyboard after a save, to say where the person is: it is not a control, so no ring */
.set{container-name:set;container-type:inline-size;width:100%;max-width:1304px}
.set-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}

/* ---- the list of settings pages ---- */
.set-nav{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.set-nav-t{flex:0 0 100%;font-size:var(--type-l);font-weight:700;line-height:1.2;color:var(--text-primary)}
.set-grp{display:contents}
.set-grp-t{display:none}
.set-link{display:inline-flex;align-items:center;min-height:var(--hit);padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--pill);color:var(--text-primary);font-size:var(--type-s);font-weight:600;text-decoration:none;transition:background 120ms var(--ease),transform 140ms var(--ease)}
.set-link[aria-current=page]{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--text-nav);font-weight:700}
.set-link:active{transform:matrix(.97,0,0,.97,0,0)}
@media (max-width:959px){.set-link{min-height:44px}}   /* a finger: the same height the shell gives its phone menu rows */
@media (hover:hover) and (pointer:fine){.set-link:hover{background:var(--bg-panel-2)}.set-link[aria-current=page]:hover{background:var(--accent-soft)}}

/* ---- the page ---- */
.set-main{display:flex;flex-direction:column;gap:24px;min-width:0;max-width:1040px}
.set-narrow{max-width:760px}
.set-form{display:flex;flex-direction:column;gap:24px;min-width:0}
.set-intro{color:var(--text-secondary);max-width:760px;line-height:1.45}
.set-lead{color:var(--text-primary)}
.set-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.set-help{display:block;font-size:var(--type-xs);font-weight:400;line-height:1.4;color:var(--text-secondary)}
.set-readout{min-height:var(--hit);display:flex;align-items:center;color:var(--text-primary)}
.set-main .panel>.actions,.set-root .panel>.actions{justify-content:flex-start}
.set-dialog .actions{justify-content:flex-end}
.set-holder{display:contents}   /* the modal dialog lives in the top layer; the holder takes no room and adds no gap */

/* ---- the template, and the radio groups of the column words ---- */
.set-template{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.set-thumb{flex:none;display:block}
.set-group{border:0;min-width:0;display:flex;flex-direction:column;gap:2px}
.set-group>legend{padding:0;margin-bottom:4px;font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
.set-other{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.set-other input[type=text]{flex:1 1 160px;min-width:0;max-width:300px;width:auto}   /* min-width 0: an input will not shrink below its own default width unless told it may */
.set-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 28px}   /* two groups side by side when the card is wide enough for two, else one */

/* ---- the Edit user and Invite user dialogs (the native dialog: modal, focus kept inside, Escape closes) ---- */
.set-dialog{margin:auto;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--divider);border-radius:var(--radius);background:var(--bg-panel);color:var(--text-primary);box-shadow:0 8px 24px rgba(24,33,39,.2)}
.set-dialog[open]{display:flex;flex-direction:column;gap:16px;animation:pop 160ms var(--ease)}
.set-dialog[open][data-kb]{animation:none}
.set-dialog::backdrop{background:rgba(24,33,39,.45)}
.set-dialog h2{font-size:var(--type-l);font-weight:700;line-height:1.2}

/* ---- the Users tables share one column grid (Email, Role, then Status or Invited by, then the actions) and become two-line rows on a phone ---- */
.table.team td.act .row-actions{margin-right:-10px;flex-wrap:wrap}   /* an armed Delete ("Confirm delete") is wider than Delete: the buttons wrap in their cell, they never run out of it */
.table.team td{overflow-wrap:anywhere}   /* a long address wraps inside its cell instead of running under the next one */
@media (max-width:959px){
  .table.team tr{grid-template-columns:minmax(0,1fr) auto}
  .table.team td.name{grid-column:1;grid-row:1}
  .table.team td.state{grid-column:2;grid-row:1}
  .table.team td.text{grid-column:1 / -1}
  .table.team td.text[data-label="Role"]::before{display:none}
  .table.team td.act{grid-column:1 / -1;text-align:left;width:auto}
  .table.team td.act:has(.row-actions:empty){display:none}
  .table.team td.act .row-actions{margin:0 0 0 -10px}
}

/* The tables are real tables from 960px (the shell's switch). The columns are fixed shares, so the table does not jump as rows come and go: the address gets
   the most (it is the long one), Role the least; the Pending table gives Invited by (another address) the room that Status takes in the Team table. */
@media (min-width:960px){
  .table.team{table-layout:fixed}
  .table.team th.name{width:34%}
  .table.team th.text{width:18%}
  .table.team th.state{width:14%}
  .table.team th.act{width:34%}
  .table.team.pend th.text{width:16%}
  .table.team.pend th.text+th.text{width:32%}
  .table.team.pend th.act{width:18%}
  .table.team th.state{text-align:left;padding:0 18px 10px 0}
  .table.team td.state{text-align:left;padding:0 18px 0 0}
}

/* The list beside the page: Wave's 230px list with its group labels. It needs about 1000px for the list (230), the gap (32) and a page of at least
   740px, which is the least that holds the Users table and the two columns of column words without clipping. Below that the pills stay. */
@container set (min-width:1000px){
  .set-grid{grid-template-columns:230px minmax(0,1fr);gap:32px}
  .set-nav{display:block}
  .set-nav-t{margin-bottom:4px}
  .set-grp{display:flex;flex-direction:column;gap:2px;margin-top:18px}
  .set-grp-t{display:block;padding:0 12px 4px;font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
  .set-link{min-height:40px;padding:0 12px;border:0;border-radius:var(--radius-sm);font-size:var(--type-m);font-weight:400}
  .set-link[aria-current=page]{font-weight:700}
}

/* ---- Accent Color: the colour box and its Hex text side by side ---- */
.set-accent-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.set-accent-row input[type=color]{width:56px;height:var(--hit);min-height:var(--hit);padding:2px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-panel);cursor:pointer}
.set-hex{width:160px;max-width:100%}
.set-region{display:contents}

/* ---- Message templates: the two lists, and an editor with a form beside the preview of the mail ---- */
.table.tpl td.act,.table.tpl th.act{text-align:right}
.table.tpl td.act .circle-btn{margin-left:auto}
.tpl-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media (min-width:1100px){.tpl-grid{grid-template-columns:minmax(0,1fr) minmax(0,420px)}}
.tpl-left{display:flex;flex-direction:column;gap:20px;min-width:0}
.tpl-form textarea{min-height:240px}
.tpl-mail{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--divider);border-radius:var(--radius-sm);background:#fff;color:#182127;overflow-wrap:anywhere}
.tpl-mail-biz{font-weight:700}
.tpl-mail-sub{padding-bottom:10px;border-bottom:1px solid var(--divider);color:#515f66}
.tpl-mail-msg{display:flex;flex-direction:column}
.tpl-mail-msg div{min-height:1.45em;white-space:pre-wrap}   /* an empty line of the message keeps its height, so the paragraphs read as paragraphs */
.tpl-edit{display:flex;flex-direction:column;gap:20px;min-width:0}
.tpl-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tpl-foot .actions{margin:0}