/* Account menu (top right), Configuration and My profile — one calm, card-based look.
   Tokens only; no sizes of their own beyond the shared UI roles (docs/reference/ui-sizing.md). */

/* ── Account menu ──────────────────────────────────────────── */
.user-dropdown{min-width:288px;max-width:min(340px,calc(100vw - 24px));padding:6px 0;border-radius:var(--r-xl)}
.user-dropdown button{display:flex;align-items:center;gap:10px;font-size:var(--ui-body,13px);padding:9px 16px;color:var(--text2)}
.user-dropdown button .dd-ic{flex:none;color:var(--text3)}
.user-dropdown button:hover .dd-ic{color:var(--text)}
.user-dropdown button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dd-head{display:flex;align-items:center;gap:12px;padding:12px 16px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.dd-head-who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.dd-head-who strong{font-size:var(--ui-body,13px);color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-head-who span{font-size:var(--ui-caption,11px);color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-head-who em{font-style:normal;font-size:var(--ui-caption,11px);color:var(--accent-ink);margin-top:2px}
.user-dropdown .dd-sep{margin:6px 0}
.user-dropdown .dd-nudge{white-space:normal;line-height:1.4;align-items:flex-start;color:var(--accent-ink);font-size:var(--ui-small,12px);margin:0 8px 4px;width:calc(100% - 16px);border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.user-dropdown .dd-nudge.dd-warn{color:var(--warn-fg,var(--orange));background:color-mix(in srgb,var(--orange) 10%,transparent)}
.user-dropdown .dd-out{color:var(--red)}
.user-dropdown .dd-out .dd-ic,.user-dropdown .dd-out:hover .dd-ic{color:var(--red)}
.user-dropdown .dd-status{padding-right:12px}
.user-dropdown .dd-status .ust-menu-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-dropdown .dd-status .dd-chev{flex:none;color:var(--text3);transition:transform var(--mo-base,240ms) var(--mo-out,ease)}
.user-dropdown .dd-status.open .dd-chev{transform:rotate(180deg)}
.dd-status-menu{margin:2px 8px 6px;padding:4px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg);max-height:min(46vh,340px);overflow:auto}
.dd-status-menu[hidden]{display:none}
.user-dropdown .dd-st-row{padding:7px 10px;border-radius:var(--r-md);gap:8px;font-size:var(--ui-small,12px);width:100%}
.user-dropdown .dd-st-row.on{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--text)}
.dd-st-e{width:20px;text-align:center;flex:none;font-size:15px;line-height:1}
.dd-st-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.dd-st-m{flex:none;font-size:var(--ui-caption,11px);color:var(--text3);display:inline-flex;align-items:center;gap:4px}
.dd-st-ok{flex:none;color:var(--accent-ink)}
.user-dropdown .dd-st-clear{color:var(--text3)}
.dd-st-empty{padding:10px;font-size:var(--ui-small,12px);color:var(--text3)}
.user-dropdown .dd-st-more{justify-content:center;margin-top:4px;padding:8px 10px;border-top:1px solid var(--border);border-radius:0 0 var(--r-md) var(--r-md);color:var(--accent-ink);font-weight:600;font-size:var(--ui-small,12px)}
@media (prefers-reduced-motion:reduce){.user-dropdown .dd-status .dd-chev{transition:none}}

/* ── Configuration ─────────────────────────────────────────── */
.cfg-modal{max-width:900px;width:calc(100vw - 24px);padding:0;overflow:hidden;max-height:min(88vh,780px);display:grid;grid-template-columns:224px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head head" "tabs body" "tabs foot"}
.cfg-head{grid-area:head;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 24px 16px;border-bottom:1px solid var(--border)}
.cfg-head h3{margin:0}
.cfg-sub{margin:4px 0 0;font-size:var(--ui-small,12px);color:var(--text3)}
.cfg-tabs{grid-area:tabs;display:flex;flex-direction:column;gap:2px;padding:12px;border-right:1px solid var(--border);background:var(--bg3);overflow-y:auto}
.cfg-tabs button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:var(--r-md);background:transparent;font:inherit;font-size:var(--ui-body,13px);color:var(--text2);text-align:left;cursor:pointer;transition:background var(--mo-fast,150ms),color var(--mo-fast,150ms)}
.cfg-tabs button svg{flex:none;color:var(--text3)}
.cfg-tabs button:hover{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}
.cfg-tabs button.on{background:var(--bg2);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm)}
.cfg-tabs button.on svg{color:var(--accent-ink)}
.cfg-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cfg-body{grid-area:body;min-height:0;overflow:auto;padding:18px 24px}
.cfg-actions-bar{grid-area:foot;display:flex;justify-content:flex-end;gap:8px;padding:12px 24px;border-top:1px solid var(--border);background:var(--bg2)}
.cfg-panel{display:flex;flex-direction:column;gap:12px}
.cfg-panel[hidden]{display:none}
.cfg-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg2);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.cfg-card-flush #prof-slack-card{margin:0}
.cfg-card-h{display:flex;gap:12px;align-items:flex-start}
.cfg-card-h>svg,.cfg-card-h>img{flex:none;margin-top:2px;color:var(--text3)}
.cfg-card-h h4{margin:0;font-size:var(--ui-section,14px);font-weight:600;color:var(--text)}
.cfg-card-h p{margin:3px 0 0;font-size:var(--ui-small,12px);line-height:1.5;color:var(--text3)}
.cfg-account{flex-direction:row;align-items:center;gap:12px}
.cfg-account-who{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.cfg-account-who strong{font-size:var(--ui-body,13px);color:var(--text)}
.cfg-account-who span{font-size:var(--ui-small,12px);color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cfg-row>span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.cfg-row strong{font-size:var(--ui-body,13px);font-weight:600;color:var(--text)}
.cfg-row small{font-size:var(--ui-small,12px);line-height:1.5;color:var(--text3);font-weight:400}
.cfg-inline{display:inline-flex;align-items:center;gap:8px;flex:none}
.cfg-value{font-size:var(--ui-body,13px);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.cfg-actions{display:flex;gap:8px;flex-wrap:wrap}
.cfg-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cfg-fields .form-row{margin:0}
.cfg-foot{margin:2px 2px 0;font-size:var(--ui-small,12px);line-height:1.5;color:var(--text3)}
.cfg-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:var(--ui-small,12px);font-weight:600;background:color-mix(in srgb,var(--orange) 14%,transparent);color:var(--orange-ink,var(--orange))}
.cfg-badge.ok{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green-ink,var(--green))}
label.cfg-row{cursor:pointer}
@media (max-width:640px){
  .cfg-fields{grid-template-columns:1fr}
  .cfg-row{flex-wrap:wrap}
  .cfg-account{flex-wrap:wrap}
  .cfg-card>.ui-seg{width:100%}.cfg-card>.ui-seg button{flex:1;justify-content:center}
}
@media (min-width:821px){#configuration-modal>.modal.cfg-modal{display:grid}}      /* the app's own modal rules make it a flex column with an id selector */
@media (max-width:820px){
  .cfg-modal{padding:0}
  .cfg-head{padding:16px 16px 12px}
  .cfg-tabs{flex-direction:row;gap:4px;padding:8px 12px;border-right:0;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .cfg-tabs::-webkit-scrollbar{display:none}
  .cfg-tabs button{flex:none;width:auto;white-space:nowrap}
  .cfg-body{padding:14px 16px}
  .cfg-actions-bar{padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){.cfg-tabs button{transition:none}}

/* Calendar configuration: presentation belongs here; records stay in their
   source modules. Text and controls deliberately use the shared sizing roles. */
.cfg-cal-controls{display:grid;grid-template-columns:72px minmax(138px,1fr) minmax(150px,1fr);gap:10px 12px;align-items:end}
.cfg-cal-controls>label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:var(--ui-label,12px);color:var(--text3)}
.cfg-cal-controls select{width:100%;height:32px;border:1px solid var(--border2);border-radius:var(--r-md);background:var(--bg);color:var(--text);padding:0 9px;font:inherit;font-size:var(--ui-input,13px)}
.cfg-cal-controls input[type="color"]{width:44px;height:32px;padding:3px;border:1px solid var(--border2);border-radius:var(--r-md);background:var(--bg);cursor:pointer}
.cfg-cal-controls .cfg-cal-check{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:8px;color:var(--text2);font-size:var(--ui-body,13px)}
.cfg-cal-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
.cfg-cal-people[hidden]{display:none}
.cfg-cal-people label{display:flex;align-items:center;gap:7px;min-width:0;font-size:var(--ui-body,13px);color:var(--text2)}
.cfg-cal-people span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-cal-item{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.cfg-cal-item-head{display:flex;align-items:flex-start;gap:9px;min-width:0}
.cfg-cal-item-head>span:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.cfg-cal-item-head strong{font-size:var(--ui-body,13px);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-cal-item-head small,.cfg-cal-empty{font-size:var(--ui-caption,11px);color:var(--text3)}
.cfg-cal-swatch{width:10px;height:10px;border-radius:50%;margin-top:4px;flex:none}
.cfg-cal-error{color:var(--red)!important}
.cfg-cal-empty{padding-top:10px}
@media(max-width:640px){
  .cfg-cal-controls{grid-template-columns:64px 1fr}
  .cfg-cal-controls>label:nth-child(3){grid-column:1/-1}
  .cfg-cal-people{grid-template-columns:1fr}
}

/* ── My profile: two columns for the short fields ────────────── */
.prof-fields{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.prof-fields .form-row{margin:0 0 8px}
.prof-hint{display:block;margin-top:5px;font-size:var(--ui-small,12px);color:var(--text3)}
.prof-note{margin:12px 0 14px;padding:9px 12px;border-radius:var(--r-md);background:var(--bg2);border:1px solid var(--border)}
.prof-card .av-picker, .av-picker{padding:14px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg2)}
@media (max-width:640px){.prof-fields{grid-template-columns:1fr}}
/* the app's generic "sticky modal footer" pulls the bar below the modal edge; the Configuration footer is simply its last row */
#configuration-modal>.modal>.cfg-actions-bar.modal-actions:last-child{position:static;bottom:auto;margin:0;padding:12px 24px;border-top:1px solid var(--border);background:var(--bg2);flex:none}
@media (max-width:820px){#configuration-modal>.modal>.cfg-actions-bar.modal-actions:last-child{padding:10px 16px}}
#configuration-modal .modal-body.cfg-body{padding:18px 24px}
@media (max-width:820px){#configuration-modal .modal-body.cfg-body{padding:14px 16px}}