/* Spotsheet — Invite & Share (DH #443) component styles.
   Only the is-* layer; the app already ships the nt-* kit + tokens.
   Backdrops are viewport-fixed (app-level overlays), not frame-absolute. */

/* header affordance */
.is-invitebtn { height: 30px; }
.is-invitebtn.pulse { box-shadow: 0 0 0 0 var(--teal-glow); animation: isPulse 2.4s ease-out infinite; }
@keyframes isPulse { 0% { box-shadow: 0 0 0 0 var(--teal-glow); } 70% { box-shadow: 0 0 0 7px rgba(53,197,199,0); } 100% { box-shadow: 0 0 0 0 rgba(53,197,199,0); } }

.is-stack { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0;
            cursor: pointer; padding: 2px 4px 2px 2px; border-radius: 18px; }
.is-stack:hover { background: var(--bg-sub); }
.is-stack-row { display: inline-flex; }
.is-stack-cell { margin-left: -8px; }
.is-stack-cell:first-child { margin-left: 0; }
.is-stack-cell .nt-as { box-shadow: 0 0 0 2px var(--bg-app); }
.is-stack-more { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-sub);
                 border: 1px solid var(--line); box-shadow: 0 0 0 2px var(--bg-app);
                 display: inline-flex; align-items: center; justify-content: center;
                 font-family: var(--mono); font-size: 9px; color: var(--fg-mute); }
.is-stack-pending { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
                    color: var(--st-flagged); border: 1px solid var(--st-flagged-bg); background: var(--st-flagged-bg);
                    border-radius: var(--r-1); padding: 2px 6px; }

/* segmented control */
.is-seg { display: inline-flex; background: var(--bg-deep); border: 1px solid var(--line);
          border-radius: var(--r-2); padding: 2px; gap: 2px; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.is-seg-opt { font-family: var(--ui); font-size: 12px; color: var(--fg-mute); background: transparent;
              border: 0; border-radius: var(--r-1); padding: 5px 12px; cursor: pointer; transition: background .12s, color .12s; }
.is-seg.sm .is-seg-opt { font-size: 11px; padding: 4px 11px; }
.is-seg-opt:hover { color: var(--fg); }
.is-seg-opt.on { background: var(--bg-row-sel); color: var(--fg-strong); box-shadow: inset 0 0 0 1px var(--teal-line); }

/* backdrops — viewport-fixed app overlays */
.is-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(8,10,12,.6);
               backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
               display: flex; align-items: center; justify-content: center; padding: 26px; }
.is-backdrop-right { justify-content: flex-end; align-items: stretch; padding: 0; }

/* invite panel */
.is-invite-body { display: flex; flex-direction: column; gap: 20px; }
.is-invite-foot { gap: 8px; }
.is-foot-summary { font-size: 11.5px; color: var(--fg-dim); display: inline-flex; align-items: center; gap: 5px; }
.is-foot-summary svg { color: var(--fg-mute); }
.is-err { font-size: 12px; color: var(--st-danger); background: rgba(180,104,104,.08);
          border: 1px solid rgba(180,104,104,.4); border-radius: var(--r-2); padding: 8px 11px; }

/* invite-link-ready rows (copy-and-send-yourself) */
.is-linkrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px;
              border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-row); }
.is-linkrow-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.is-linkrow-email { font-size: 12px; color: var(--fg-strong); }
.is-linkrow-url { font-size: 11px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* email chips */
.is-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px;
            background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-2);
            padding: 6px 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,.45); cursor: text; }
.is-chips:focus-within { border-color: var(--teal-line); box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 3px var(--teal-glow); }
.is-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 5px 0 9px;
           background: var(--bg-sub); border: 1px solid var(--line); border-radius: 12px;
           font-family: var(--mono); font-size: 11.5px; color: var(--fg); }
.is-chip.bad { border-color: rgba(180,104,104,.55); color: var(--st-danger); }
.is-chip-warn { width: 13px; height: 13px; border-radius: 50%; border: 1px solid currentColor; font-size: 9px;
                display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.is-chip-x { background: transparent; border: 0; color: var(--fg-dim); cursor: pointer; display: inline-flex;
             padding: 2px; border-radius: 50%; }
.is-chip-x:hover { color: var(--fg); background: var(--bg-row-hover); }
.is-chip-input { flex: 1; min-width: 140px; background: transparent; border: 0; outline: none;
                 color: var(--fg); font-family: var(--ui); font-size: 13px; height: 24px; }
.is-chip-input::placeholder { color: var(--fg-dim); }

/* permission grant matrix */
.is-grant { display: flex; flex-direction: column; gap: 12px; }
.is-grant-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.is-preset { font-family: var(--ui); font-size: 11.5px; color: var(--fg-mute); background: var(--bg-sub);
             border: 1px solid var(--line); border-radius: 13px; padding: 4px 12px; cursor: pointer; transition: all .12s; }
.is-preset:hover { color: var(--fg); border-color: var(--line-strong); }
.is-preset.on { color: var(--teal); border-color: var(--teal-line); background: var(--teal-bg); }
.is-preset.ghost { cursor: default; opacity: .6; }
.is-preset.ghost.on { opacity: 1; color: var(--fg-strong); background: var(--bg-row-sel); border-color: var(--line-strong); }

.is-matrix { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-2);
             overflow: hidden; background: var(--bg-deep); }
.is-grow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           padding: 9px 12px; border-bottom: 1px solid var(--line-soft); transition: background .12s; }
.is-grow:last-child { border-bottom: 0; }
.is-grow.on { background: var(--bg-row); }
.is-gcheck { display: inline-flex; align-items: center; gap: 11px; background: transparent; border: 0;
             cursor: pointer; text-align: left; padding: 0; }
.is-gbox { width: 17px; height: 17px; flex-shrink: 0; border-radius: var(--r-1); border: 1px solid var(--line-strong);
           background: var(--bg-deep); display: inline-flex; align-items: center; justify-content: center; color: var(--teal); }
.is-grow.on .is-gbox { border-color: var(--teal-line); background: var(--teal-bg); }
.is-gtab { display: flex; flex-direction: column; gap: 1px; }
.is-gtab-name { font-size: 13px; color: var(--fg); }
.is-grow.on .is-gtab-name { color: var(--fg-strong); }
.is-gtab-desc { font-size: 10.5px; color: var(--fg-dim); }
.is-gnone { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.is-grant-foot { display: flex; }
.is-lvl-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 10.5px; color: var(--fg-dim); }
.is-lvl-item b { color: var(--fg-mute); font-weight: 500; }

/* password row */
.is-pw { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-deep); overflow: hidden; }
.is-pw.on { border-color: var(--line-strong); }
.is-pw-head { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
              background: transparent; border: 0; cursor: pointer; padding: 13px 14px; }
.is-switch { width: 32px; height: 18px; flex-shrink: 0; border-radius: 10px; background: var(--bg-sub);
             border: 1px solid var(--line-strong); position: relative; transition: background .15s, border-color .15s; margin-top: 1px; }
.is-switch-dot { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%;
                 background: var(--fg-mute); transition: transform .15s, background .15s; }
.is-switch.on { background: var(--teal-bg); border-color: var(--teal-line); }
.is-switch.on .is-switch-dot { transform: translateX(14px); background: var(--teal); }
.is-pw-titles { display: flex; flex-direction: column; gap: 3px; }
.is-pw-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-strong); }
.is-pw-title svg { color: var(--fg-mute); }
.is-pw-sub { font-size: 11px; color: var(--fg-dim); line-height: 1.45; }
.is-pw-body { padding: 0 14px 14px 58px; display: flex; flex-direction: column; gap: 10px; }
.is-pw-field { display: flex; gap: 8px; align-items: center; }
.is-pw-field .nt-input { height: 32px; }
.is-pw-meter { display: flex; align-items: center; gap: 10px; }
.is-pw-bars { display: inline-flex; gap: 4px; }
.is-pw-bar { width: 34px; height: 4px; border-radius: 2px; background: var(--bg-sub); border: 1px solid var(--line-soft); }
.is-pw-bar.fill.s1 { background: var(--st-danger); border-color: var(--st-danger); }
.is-pw-bar.fill.s2 { background: var(--st-flagged); border-color: var(--st-flagged); }
.is-pw-bar.fill.s3 { background: var(--st-resolved); border-color: var(--st-resolved); }
.is-pw-strength { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
.is-pw-strength.s1 { color: var(--st-danger); }
.is-pw-strength.s2 { color: var(--st-flagged); }
.is-pw-strength.s3 { color: var(--st-resolved); }

/* members & invites slide-over */
.is-mpanel { width: 500px; max-width: 92%; height: 100%; background: var(--bg-panel);
             border-left: 1px solid var(--line); box-shadow: var(--float); display: flex; flex-direction: column; }
.is-mpanel-head { flex-shrink: 0; padding: 15px 18px 14px; border-bottom: 1px solid var(--line-soft);
                  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.is-mpanel-body { flex: 1; overflow: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 22px; }
.is-mempty, .is-mhint { font-size: 12.5px; color: var(--fg-dim); padding: 6px 2px; line-height: 1.55; }
.is-mgroup { display: flex; flex-direction: column; }
.is-mgroup-h { display: flex; align-items: center; gap: 8px; padding: 0 2px 9px; }
.is-mgroup-n { font-size: 10px; color: var(--fg-faint); }

.is-mrow { border: 1px solid var(--line-soft); border-radius: var(--r-2); margin-bottom: 8px; background: var(--bg-row);
           transition: border-color .12s; }
.is-mrow:hover { border-color: var(--line); }
.is-mrow.editing { border-color: var(--teal-line); background: var(--bg-panel); }
.is-mrow-main { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.is-mrow-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.is-mrow-name { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-strong); }
.is-owner-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 8.5px;
                 letter-spacing: .12em; color: var(--teal); border: 1px solid var(--teal-line); background: var(--teal-bg);
                 border-radius: var(--r-1); padding: 1px 6px; }
.is-mrow-email { font-size: 11px; color: var(--fg-dim); }
.is-mrow-meta { font-size: 11.5px; color: var(--fg-dim); }
.is-mrow-edit { padding: 4px 12px 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 12px; }
.is-mrow-edit > .is-grant { margin-top: 8px; }
.is-mrow-edit-foot { display: flex; align-items: center; gap: 8px; }

.is-gchips { display: inline-flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; max-width: 220px; }
.is-gchip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--fg-mute);
            background: var(--bg-sub); border: 1px solid var(--line); border-radius: var(--r-1); padding: 2px 4px 2px 7px; }
.is-gchip i { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
              color: var(--fg-dim); border-left: 1px solid var(--line); padding-left: 5px; }
.is-gchip.lvl-write i { color: var(--fg-mute); }
.is-gchip.lvl-edit { border-color: var(--teal-line); }
.is-gchip.lvl-edit i { color: var(--teal); }

/* pending invite row */
.is-irow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin-bottom: 8px;
           border: 1px dashed var(--line-strong); border-radius: var(--r-2); background: rgba(193,147,85,.04); }
.is-irow-av { box-shadow: none; opacity: .8; }
.is-irow-id { display: flex; flex-direction: column; gap: 4px; margin-right: auto; min-width: 0; }
.is-irow-wait { font-size: 13px; color: var(--fg); }
.is-irow-email { color: var(--fg-strong); font-size: 12px; }
.is-irow-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--fg-dim); }
.is-irow-pw { display: inline-flex; align-items: center; gap: 3px; color: var(--fg-mute); }

/* empty-state hero */
.is-empty { height: 100%; display: flex; align-items: center; justify-content: center; padding: 30px; }
.is-empty-card { max-width: 520px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; }
.is-empty-stack { display: flex; align-items: center; margin-bottom: 22px; }
.is-empty-stack .nt-as { box-shadow: 0 0 0 3px var(--bg-app); }
.is-empty-plus { width: 40px; height: 40px; border-radius: 50%; margin-left: -8px; z-index: 2;
                 background: var(--teal-bg); border: 1px dashed var(--teal-line); color: var(--teal);
                 display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--bg-app); }
.is-empty-ghost { width: 40px; height: 40px; border-radius: 50%; margin-left: -8px; background: var(--bg-sub);
                  border: 1px dashed var(--line-strong); box-shadow: 0 0 0 3px var(--bg-app); opacity: .6; }
.is-empty-ghost.two { opacity: .35; }
.is-empty-title { font-size: 21px; color: var(--fg-strong); font-weight: 500; margin: 0 0 12px; letter-spacing: -.01em; }
.is-empty-sub { font-size: 13.5px; color: var(--fg-mute); line-height: 1.6; margin: 0 0 24px; max-width: 440px; }
.is-empty-actions { display: flex; gap: 10px; margin-bottom: 20px; }
.is-empty-meta { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--fg-dim); }
.is-empty-meta span { display: inline-flex; align-items: center; gap: 6px; }
.is-empty-meta svg { color: var(--fg-mute); }
.is-dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-faint); }

/* cue room nudge */
.is-nudge { display: flex; align-items: center; gap: 13px; padding: 11px 12px 11px 14px;
            background: var(--bg-panel); border: 1px solid var(--line); border-left: 2px solid var(--teal-line);
            border-radius: var(--r-2); box-shadow: var(--float); }
.is-nudge-ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--teal-bg);
               border: 1px solid var(--teal-line); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; }
.is-nudge-txt { display: flex; flex-direction: column; gap: 2px; margin-right: 6px; }
.is-nudge-title { font-size: 13px; color: var(--fg-strong); }
.is-nudge-sub { font-size: 11.5px; color: var(--fg-mute); }