/* KAYCO Item Master v11 — Settings (#/settings, settings.js) and the menu's identity chip. Same tokens as im.css (plum, ink, line),
   Plus Jakarta Sans from shop.css; lists reuse .sh-list / .sh-li from im-share.css. Prefix st- (and im-x-who for the menu). */

/* ---------- menu: who is signed in ---------- */
.im-x-who { display:flex; align-items:center; gap:8px; margin:0 10px 6px; padding:8px 10px; border-radius:12px; background:var(--mist); font-size:13px; color:var(--ink-600); }
.im-x-who > svg { flex:none; color:var(--ink-400); }
.im-x-who-e { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--ink-900); }

/* role chips (menu, Settings) */
.im-x-who-r, .st-role { flex:none; display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.im-x-who-r.is-viewer, .st-role.is-viewer { background:#fff; color:var(--ink-600); box-shadow:inset 0 0 0 1px var(--line); }
.im-x-who-r.is-editor, .st-role.is-editor { background:var(--leaf-50); color:#0E6B4C; }
.im-x-who-r.is-admin, .st-role.is-admin { background:var(--plum-100); color:var(--plum); }

/* ---------- page + tabs ---------- */
.st-me { display:inline-flex; align-items:center; gap:8px; max-width:100%; font-size:13px; font-weight:600; color:var(--ink-600); }
.st-me > svg { flex:none; color:var(--ink-400); }
.st-tabs { display:flex; gap:4px; margin:18px -16px 0; padding:0 16px 2px; overflow-x:auto; border-bottom:1px solid var(--line); }
.st-tab { flex:none; display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 12px; border-bottom:2px solid transparent; margin-bottom:-3px; font-size:14px; font-weight:600; color:var(--ink-500); white-space:nowrap; }
.st-tab > svg { color:var(--ink-400); }
.st-tab:hover { color:var(--ink-900); }
.st-tab.is-on { color:var(--plum); border-bottom-color:var(--plum); }
.st-tab.is-on > svg { color:var(--plum); }
.st-tab:focus-visible { outline:2px solid var(--plum); outline-offset:-2px; border-radius:8px; }
@media (min-width:640px) { .st-tabs { margin:22px 0 0; padding:0; } }
.st-panel { padding-top:18px; }
.st-sub { max-width:780px; font-size:14px; line-height:1.55; color:var(--ink-500); }
.st-sub b { color:var(--ink-700); }
.st-bar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 20px; }
.st-bar-f { display:flex; flex-wrap:wrap; gap:4px 16px; }
.st-note { margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--ink-500); }
.st-foot { margin-top:10px; font-size:12.5px; color:var(--ink-500); }
.st-empty { display:flex; align-items:center; gap:8px; margin-top:16px; padding:14px; border-radius:14px; background:var(--canvas); font-size:14px; color:var(--ink-500); box-shadow:inset 0 0 0 1px var(--line); }

/* selects */
.st-sel { padding-right:34px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6772' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.st-sel-s { height:34px; padding:0 30px 0 10px; border-radius:10px; border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink-900); }
.st-sel-s:focus { outline:none; border-color:var(--plum); box-shadow:0 0 0 3px rgba(122,56,114,.12); }
.st-sel-s:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- Users ---------- */
.st-add { display:flex; flex-wrap:wrap; gap:8px; max-width:640px; margin-top:16px; }
.st-add-e { min-width:0; flex:1 1 240px; }
.st-add .st-sel { flex:0 0 130px; }
.st-av { font-size:16px; font-weight:800; }
.st-av.is-editor { background:var(--leaf-50); color:#0E6B4C; }
.st-av.is-viewer { background:var(--mist); color:var(--ink-500); }
.st-mail { font-weight:500; color:var(--ink-500); }
.st-you { display:inline-flex; height:18px; padding:0 7px; border-radius:99px; background:var(--plum-50); color:var(--plum); font-size:11px; font-weight:700; vertical-align:2px; }
.st-dis { display:inline-flex; align-items:center; gap:4px; font-weight:700; color:#9B2C1F; }
.st-u-a { gap:6px; }
@media (max-width:639px) {
  .st-u { flex-wrap:wrap; }
  .st-u .sh-li-m { flex-basis:calc(100% - 56px); }
  .st-u-a { width:100%; justify-content:flex-end; padding-left:56px; }
  .st-u .sh-li-t { white-space:normal; overflow-wrap:anywhere; }
}

/* ---------- Access ---------- */
.st-card { max-width:780px; margin-top:16px; padding:18px; border-radius:20px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.st-h2 { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:var(--ink-900); }
.st-h2 > svg { color:var(--plum); }
.st-opts { display:grid; gap:8px; margin-top:12px; }
@media (min-width:640px) { .st-opts { grid-template-columns:1fr 1fr; } }
.st-opt { display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:14px; cursor:pointer; box-shadow:inset 0 0 0 1px var(--line); font-size:14px; color:var(--ink-900); }
.st-opt input { flex:none; width:18px; height:18px; margin-top:1px; accent-color:var(--plum); }
.st-opt small { display:block; margin-top:2px; font-size:12.5px; line-height:1.45; color:var(--ink-500); }
.st-opt.is-on { background:var(--plum-50); box-shadow:inset 0 0 0 1.5px var(--plum-200); }
.st-roles { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.st-roles > div { display:flex; align-items:flex-start; gap:12px; }
.st-roles dt { flex:none; width:64px; padding-top:1px; }
.st-roles dd { font-size:13.5px; line-height:1.5; color:var(--ink-600); }

/* ---------- Activity ---------- */
.st-filt { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-top:16px; }
.st-filt label { display:flex; flex-direction:column; gap:4px; flex:1 1 160px; min-width:0; max-width:260px; }
.st-filt label span { font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); }
.st-filt .im-x-input { width:100%; }
.st-filt-b { display:flex; gap:6px; }
.st-log { display:flex; flex-direction:column; margin-top:16px; border-radius:18px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.st-ev { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-top:1px solid var(--line); }
.st-ev:first-child { border-top:0; }
.st-ev-a { flex:none; width:98px; margin-top:1px; padding:3px 8px; border-radius:8px; background:var(--mist); font-size:11.5px; font-weight:700; color:var(--ink-600); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-ev-a.is-user, .st-ev-a.is-setting, .st-ev-a.is-key { background:var(--plum-50); color:var(--plum); }
.st-ev-a.is-share, .st-ev-a.is-upload { background:var(--leaf-50); color:#0E6B4C; }
.st-ev-a.is-share-revoke, .st-ev-a.is-hide { background:#FCECEA; color:#9B2C1F; }
.st-ev-m { min-width:0; flex:1; }
.st-ev-t { font-size:14px; line-height:1.45; color:var(--ink-900); overflow-wrap:anywhere; }
.st-ev-s { display:flex; flex-wrap:wrap; gap:2px 14px; margin-top:2px; font-size:12.5px; color:var(--ink-500); }
.st-ev-i { font-weight:600; color:var(--plum); }
.st-ev-i:hover { text-decoration:underline; }
@media (max-width:639px) { .st-ev { flex-direction:column; gap:6px; } .st-ev-a { width:auto; } .st-ev-ip { display:none; } }

/* ---------- Data status ---------- */
.st-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:16px; }
@media (min-width:768px) { .st-tiles { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.st-tile { padding:14px 16px; border-radius:18px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.st-tile-v { font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ink-900); }
.st-tile-l { margin-top:2px; font-size:13px; font-weight:600; color:var(--ink-600); }
.st-tile-s { margin-top:2px; font-size:12px; color:var(--ink-400); }
.st-kv { display:flex; flex-direction:column; margin-top:10px; }
.st-kv > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 16px; padding:9px 0; border-top:1px solid var(--line); font-size:14px; }
.st-kv > div:first-child { border-top:0; }
.st-kv dt { color:var(--ink-600); }
.st-kv dd { font-weight:600; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.st-kv small { margin-left:6px; font-weight:500; color:var(--ink-400); }

/* share list: who made a link, and a quiet lock where the viewer can't revoke */
.sh-by { font-weight:600; color:var(--ink-700); }
.sh-by.is-me { color:var(--plum); }
.sh-rv-no { color:var(--ink-300) !important; cursor:default; }
.sh-rv-no:hover { background:transparent !important; }