/* ------------------------------------------------------------------------------------ */
/* Harmony — the app language for every signed-in user (component prefix .svc-).            */
/* Shared by the service desk, the account pages, notifications, task boards and the auth  */
/* flows: one job per screen, whole-row taps, status as colour + word, sheets instead of   */
/* modals, sticky action bars. Built on the product tokens (--hy-*) from harmony-product-ui */
/* and the shared .hy-card / .hy-btn families from harmony-pages. Loads before pages.css.   */
/* Screen-specific families (forms runtime, tracker, work-task) stay in their own files.   */
/* ------------------------------------------------------------------------------------ */

.svc-page {
    --svc-accent: var(--hy-primary);
    --svc-accent-soft: var(--hy-primary-soft);
    --svc-accent-line: var(--hy-primary-line);
    --svc-hair: #eef2f6;
    --svc-gap: 14px;
    display: grid;
    gap: var(--svc-gap);
    width: 100%;
    color: var(--hy-text);
}
.dashboard-content.harmony-content > .svc-page { max-width: 1040px; }
.dashboard-content.harmony-content > .svc-page--detail,
.dashboard-content.harmony-content > .svc-page--work { max-width: 1180px; }
.dashboard-content.harmony-content > .svc-page--form,
.dashboard-content.harmony-content > .svc-page--confirm { max-width: 780px; }

[data-accent="blue"]    { --svc-accent: #075fe4; --svc-accent-soft: #eef4ff; --svc-accent-line: #cfe0fb; }
[data-accent="emerald"] { --svc-accent: #087b59; --svc-accent-soft: #e9f8f1; --svc-accent-line: #bfe6d5; }
[data-accent="indigo"]  { --svc-accent: #4f46d8; --svc-accent-soft: #eeedff; --svc-accent-line: #d3d0f7; }
[data-accent="amber"]   { --svc-accent: #b26a05; --svc-accent-soft: #fff5e2; --svc-accent-line: #f3dcae; }
[data-accent="violet"]  { --svc-accent: #7c3dcc; --svc-accent-soft: #f5ecff; --svc-accent-line: #e0cdf7; }
[data-accent="sky"]     { --svc-accent: #0678a6; --svc-accent-soft: #e8f6fd; --svc-accent-line: #bfe3f5; }
.dashboard-content.harmony-content > .svc-page--wide { max-width: none; }

/* A sheet panel is often a <form>; it must keep the panel's own centring margin, which this
   rule outranks (0,1,1 beats 0,1,0) and would slam the dialog against the inline-start edge. */
.svc-page form:not(.svc-sheet__panel) { margin: 0; }
.svc-page h1, .svc-page h2, .svc-page h3 { margin: 0; color: var(--hy-ink); }

/* ---- page bar: compact title + the one primary action ---- */
.svc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 2px; }
.svc-bar h1 { font-size: 19px; font-weight: 900; line-height: 1.4; letter-spacing: -.01em; }
.svc-bar h1 small { margin-inline-start: 6px; color: var(--hy-muted); font-size: 12.5px; font-weight: 700; }
.svc-bar__actions { display: flex; align-items: center; gap: 8px; }
.svc-back { display: inline-flex; align-items: center; gap: 6px; width: max-content; min-height: 36px; padding: 4px 10px 4px 12px; border-radius: 10px; color: var(--hy-muted) !important; font-size: 12.5px; font-weight: 800; text-decoration: none; }
.svc-back:hover { background: #fff; color: var(--hy-ink) !important; }
.svc-back i { font-size: 13px; }

/* ---- sections (white sheets) ---- */
.svc-section { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--hy-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 32, 68, .03); }
.svc-section__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 6px; }
.svc-section__head h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; line-height: 1.4; }
.svc-section__head h2 i { color: var(--svc-accent); font-size: 15px; }
.svc-section__link { display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: 4px 6px; border-radius: 8px; color: var(--hy-primary) !important; font-size: 12.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.svc-section__link:hover { background: var(--hy-primary-soft); }
.svc-section__link i { font-size: 12px; }
.svc-section__body { padding: 10px 16px 16px; }
.svc-section__foot { display: flex; align-items: center; justify-content: center; padding: 10px 16px; border-top: 1px solid var(--svc-hair); }
.svc-section__head + .svc-list { margin-top: 4px; }
.svc-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 7px; border-radius: 999px; background: #eef2f7; color: #3f4d63; font-size: 11.5px; font-weight: 900; }
.svc-badge[data-tone="warning"] { background: #fff1d6; color: #9a5a09; }
.svc-badge[data-tone="danger"]  { background: #ffe6ea; color: var(--hy-danger); }
.svc-badge[data-tone="info"]    { background: var(--hy-primary-soft); color: var(--hy-primary); }

/* ---- rows: the whole row is the tap target ---- */
.svc-list { display: block; }
.svc-list > * + * { border-top: 1px solid var(--svc-hair); }
.svc-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 66px; padding: 11px 16px; color: inherit; text-decoration: none !important; transition: background .12s ease; }
a.svc-row:hover, a.svc-row:focus-visible { background: #f7f9fc; }
.svc-row.is-urgent::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--hy-danger); }
.svc-row.is-highlight { background: #fbfdff; }
.svc-row__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--svc-accent-soft); color: var(--svc-accent); font-size: 18px; }
.svc-row__icon[data-tone="warning"] { background: #fff3da; color: #a86508; }
.svc-row__icon[data-tone="danger"]  { background: #ffe9ec; color: var(--hy-danger); }
.svc-row__icon[data-tone="success"] { background: #e6f7ef; color: var(--hy-success); }
.svc-row__icon[data-tone="neutral"] { background: #eef1f6; color: #5b6982; }
.svc-row__main { display: grid; gap: 3px; min-width: 0; }
.svc-row__main strong { overflow: hidden; color: var(--hy-ink); font-size: 14px; font-weight: 850; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.svc-row__main small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow: hidden; color: var(--hy-muted); font-size: 12px; font-weight: 650; line-height: 1.5; }
.svc-row__main small > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-row__main small i { color: #9fabbd; font-size: 11px; }
.svc-row__side { display: grid; justify-items: end; gap: 5px; text-align: left; }
.svc-row__side small { color: var(--hy-subtle); font-size: 11px; font-weight: 750; white-space: nowrap; }
.svc-row > .svc-row__chev { color: #b3bfcd; font-size: 13px; }
.svc-row__action { display: contents; }
.svc-row .hy-btn--sm { min-height: 36px; }

/* ---- chips: colour + word ---- */
.svc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: #f0f3f8; color: #4c5a70; font-size: 11.5px; font-weight: 850; line-height: 1.5; white-space: nowrap; }
.svc-chip::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.svc-chip[data-tone="info"]    { background: #e7f0ff; color: #1557b8; }
.svc-chip[data-tone="success"] { background: #e3f6ec; color: #0c6b4d; }
.svc-chip[data-tone="warning"] { background: #fff0d1; color: #9a5a09; }
.svc-chip[data-tone="danger"]  { background: #ffe6ea; color: #b8283a; }
.svc-chip[data-tone="neutral"] { background: #eef1f6; color: #4c5a70; }
.svc-chip[data-tone="violet"]  { background: #f1e9ff; color: #6d28d9; }
.svc-chip--plain::before { display: none; }
.svc-chip--lg { padding: 6px 14px; font-size: 13px; }
.svc-chip i { font-size: 12px; }

/* ---- segmented filters ---- */
.svc-seg { display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.svc-seg::-webkit-scrollbar { display: none; }
.svc-seg button { font: inherit; cursor: pointer; }
/* the shell normalises every button under .dashboard-content; match that specificity so a <button> tab looks like an <a> tab */
.harmony-app-shell .dashboard-content .svc-seg button { min-height: 36px; padding: 5px 14px; border: 1px solid var(--hy-line); border-radius: 999px !important; background: #fff; color: var(--hy-text); font-size: 12.5px !important; font-weight: 800; box-shadow: none; }
.harmony-app-shell .dashboard-content .svc-seg button:hover { border-color: #b9c8db; }
.harmony-app-shell .dashboard-content .svc-seg button.is-active { border-color: var(--hy-ink); background: var(--hy-ink); color: #fff; }
.svc-seg a, .svc-seg button { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 5px 14px; border: 1px solid var(--hy-line); border-radius: 999px; background: #fff; color: var(--hy-text); font-size: 12.5px; font-weight: 800; text-decoration: none !important; white-space: nowrap; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.svc-seg a:hover, .svc-seg button:hover { border-color: #b9c8db; }
.svc-seg a b, .svc-seg button b { font-weight: 900; opacity: .65; }
.svc-seg a.is-active, .svc-seg button.is-active { border-color: var(--hy-ink); background: var(--hy-ink); color: #fff; }
.svc-seg a.is-active b, .svc-seg button.is-active b { opacity: .8; }
.svc-seg a[data-tone="danger"]:not(.is-active), .svc-seg button[data-tone="danger"]:not(.is-active) { border-color: #f3c6cc; color: var(--hy-danger); }
.svc-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); align-items: center; gap: 10px; }

/* ---- search ---- */
.svc-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 48px; padding: 4px 6px 4px 14px; border: 1px solid var(--hy-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 32, 68, .03); transition: border-color .15s ease, box-shadow .15s ease; }
.svc-search:focus-within { border-color: var(--hy-primary); box-shadow: 0 0 0 4px rgba(7, 95, 228, .1); }
.svc-search > i { color: #8c99ad; font-size: 16px; }
.harmony-app-shell .dashboard-content .svc-search input { min-width: 0; min-height: 40px; padding: 4px 2px !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--hy-ink) !important; font-size: 14px !important; font-weight: 650; }
.svc-search input::-webkit-search-cancel-button { appearance: none; }
.svc-search__clear { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #7a8799 !important; text-decoration: none; }
.svc-search__clear:hover { background: var(--hy-surface-soft); color: var(--hy-ink) !important; }
.svc-search .hy-btn--sm { min-height: 38px; }

/* ---- service tiles ---- */
.svc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.svc-tile { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--hy-line); border-radius: 16px; background: #fff; color: inherit; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
a.svc-tile:hover { border-color: var(--svc-accent-line); box-shadow: 0 10px 24px rgba(15, 32, 68, .08); transform: translateY(-1px); }
.svc-tile__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--svc-accent-soft); color: var(--svc-accent); font-size: 21px; }
.svc-tile strong { display: -webkit-box; overflow: hidden; color: var(--hy-ink); font-size: 13.5px; font-weight: 900; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.svc-tile small { display: -webkit-box; overflow: hidden; color: var(--hy-muted); font-size: 11.5px; font-weight: 650; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.svc-tile__meta { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--hy-subtle); font-size: 11px; font-weight: 750; }
.svc-tile__meta i { color: var(--hy-success); }
.svc-tile.is-locked { opacity: .62; }
/* app-icon style (home) */
.svc-tiles--icons { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.svc-tiles--icons .svc-tile { justify-items: center; gap: 8px; padding: 12px 8px; border-color: transparent; background: var(--hy-surface-soft); text-align: center; }
.svc-tiles--icons a.svc-tile:hover { border-color: var(--svc-accent-line); background: #fff; }
.svc-tiles--icons .svc-tile strong { font-size: 12.5px; font-weight: 850; }
.svc-tiles--icons .svc-tile.is-all { border: 1px dashed var(--hy-line-strong); background: #fff; }
.svc-tiles--icons .svc-tile.is-all .svc-tile__icon { background: #eef1f6; color: #536078; }

/* ---- greeting + two columns ---- */
.svc-greet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px; }
.svc-greet h1 { font-size: 20px; font-weight: 950; line-height: 1.4; }
.svc-greet h1 small { display: block; margin-top: 2px; color: var(--hy-muted); font-size: 12.5px; font-weight: 700; }
.svc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--svc-gap); align-items: start; }

/* ---- empty ---- */
.svc-empty { display: grid; justify-items: center; gap: 4px; padding: 28px 16px; color: var(--hy-muted); text-align: center; }
.svc-empty > i { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%; background: var(--hy-surface-soft); color: #9fb0c6; font-size: 22px; }
.svc-empty[data-tone="success"] > i { background: #e6f7ef; color: var(--hy-success); }
.svc-empty strong { color: var(--hy-ink); font-size: 13.5px; font-weight: 900; }
.svc-empty p { margin: 0; max-width: 40ch; font-size: 12px; font-weight: 600; line-height: 1.75; }
.svc-empty .hy-btn { margin-top: 8px; }

/* ---- notes / flashes ---- */
.svc-flash, .svc-note { display: flex; align-items: flex-start; gap: 9px; padding: 10px 14px; border: 1px solid var(--hy-primary-line); border-radius: 14px; background: var(--hy-primary-soft); color: #1f4f9a; font-size: 12.5px; font-weight: 700; line-height: 1.75; }
.svc-flash i, .svc-note i { flex: none; margin-top: 3px; font-size: 14px; }
.svc-flash[data-tone="success"], .svc-note[data-tone="success"] { border-color: #bfe3d2; background: #eefaf4; color: #0f6b4a; }
.svc-flash[data-tone="danger"],  .svc-note[data-tone="danger"]  { border-color: #f1c3c9; background: #fff3f4; color: #a92838; }
.svc-flash[data-tone="warning"], .svc-note[data-tone="warning"] { border-color: #f2d8a4; background: #fff8e8; color: #8a4f06; }
.svc-note[data-tone="neutral"] { border-color: var(--hy-line); background: var(--hy-surface-soft); color: var(--hy-text); }
.svc-note a { color: inherit; font-weight: 900; text-decoration: underline; }
.svc-alert { display: grid; gap: 3px; padding: 11px 14px; border: 1px solid #f1c3c9; border-radius: 14px; background: #fff3f4; color: #a92838; font-size: 12.5px; line-height: 1.75; }
.svc-alert strong { display: flex; align-items: center; gap: 6px; font-weight: 900; }

/* ---- detail header ---- */
.svc-hero { display: grid; gap: 14px; padding: 18px 18px 16px; }
.svc-hero__top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.svc-hero__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--svc-accent-soft); color: var(--svc-accent); font-size: 23px; }
.svc-hero__text { display: grid; gap: 4px; min-width: 0; }
.svc-hero__text h1 { font-size: 18px; font-weight: 950; line-height: 1.4; }
.svc-hero__text p { margin: 0; color: var(--hy-muted); font-size: 12.5px; font-weight: 650; line-height: 1.7; }
.svc-hero__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.svc-hero__status p { margin: 0; color: var(--hy-text); font-size: 13px; font-weight: 700; line-height: 1.7; }
.svc-hero__cta { display: grid; gap: 6px; max-width: 420px; }
.svc-hero__cta .hy-btn { width: 100%; }
.svc-hero__cta small { color: var(--hy-muted); font-size: 11.5px; font-weight: 700; text-align: center; }
.svc-hero .svc-track { padding-top: 14px; border-top: 1px solid var(--svc-hair); }
.svc-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--hy-muted); font-size: 12px; font-weight: 700; }
.svc-facts span { display: inline-flex; align-items: center; gap: 5px; }
.svc-facts i { color: #9fabbd; font-size: 12px; }
.svc-facts b { color: var(--hy-text); font-weight: 800; }
.svc-ref { color: var(--hy-subtle); font-size: 11px; font-weight: 750; letter-spacing: .02em; }

/* ---- key / value ---- */
.svc-kv { display: grid; margin: 0; }
.svc-kv > div { display: grid; grid-template-columns: minmax(90px, 32%) minmax(0, 1fr); gap: 6px 12px; padding: 9px 0; border-top: 1px solid var(--svc-hair); }
.svc-kv > div:first-child { border-top: 0; padding-top: 2px; }
.svc-kv dt { color: var(--hy-muted); font-size: 12px; font-weight: 750; line-height: 1.7; }
.svc-kv dd { margin: 0; overflow-wrap: anywhere; color: var(--hy-ink); font-size: 13px; font-weight: 750; line-height: 1.7; white-space: pre-line; }
.svc-kv--tight > div { padding: 7px 0; }

/* collapsible group (submitted forms) */
.svc-group { border-top: 1px solid var(--svc-hair); }
.svc-group:first-child { border-top: 0; }
.svc-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.svc-group > summary::-webkit-details-marker { display: none; }
.svc-group > summary:hover { background: #f7f9fc; }
.svc-group__title { display: grid; gap: 1px; min-width: 0; }
.svc-group__title strong { overflow: hidden; color: var(--hy-ink); font-size: 13.5px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.svc-group__title small { color: var(--hy-muted); font-size: 11.5px; font-weight: 700; }
.svc-group > summary > i { color: #94a3b8; font-size: 12px; transition: transform .2s ease; }
.svc-group[open] > summary > i { transform: rotate(180deg); }
.svc-group__body { padding: 0 16px 14px; }
.svc-group__empty { margin: 0; color: var(--hy-muted); font-size: 12px; }

/* ---- timeline ---- */
.svc-tl { display: grid; margin: 0; padding: 0; list-style: none; }
.svc-tl li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.svc-tl li:last-child { padding-bottom: 0; }
.svc-tl li::before { content: ''; position: absolute; top: 32px; bottom: -2px; inset-inline-start: 15px; width: 2px; background: #e6ebf2; }
.svc-tl li:last-child::before { display: none; }
.svc-tl__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hy-primary-soft); color: var(--hy-primary); font-size: 14px; }
.svc-tl li[data-tone="success"] .svc-tl__icon { background: #e6f7ef; color: var(--hy-success); }
.svc-tl li[data-tone="danger"]  .svc-tl__icon { background: #ffe9ec; color: var(--hy-danger); }
.svc-tl li[data-tone="warning"] .svc-tl__icon { background: #fff3da; color: var(--hy-warning); }
.svc-tl li.is-latest .svc-tl__icon { box-shadow: 0 0 0 4px rgba(7, 95, 228, .12); }
.svc-tl li.is-latest[data-tone="success"] .svc-tl__icon { box-shadow: 0 0 0 4px rgba(8, 123, 89, .12); }
.svc-tl li.is-latest[data-tone="danger"] .svc-tl__icon { box-shadow: 0 0 0 4px rgba(201, 52, 69, .12); }
.svc-tl__body { display: grid; gap: 2px; min-width: 0; padding-top: 5px; }
.svc-tl__body strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--hy-ink); font-size: 13px; font-weight: 900; }
.svc-tl__body p { margin: 0; color: var(--hy-muted); font-size: 12px; font-weight: 600; line-height: 1.7; }
.svc-tl__body small { color: var(--hy-subtle); font-size: 11px; font-weight: 700; }
.svc-tl__body small b { color: var(--hy-text); font-weight: 800; }
.svc-tl__now { padding: 1px 8px; border-radius: 999px; background: var(--hy-primary-soft); color: var(--hy-primary); font-size: 10.5px; font-weight: 900; }

/* ---- files ---- */
.svc-files { display: grid; gap: 6px; }
.svc-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 7px 12px; border: 1px solid var(--hy-line); border-radius: 12px; background: #fff; color: var(--hy-ink) !important; font-size: 12.5px; font-weight: 800; text-decoration: none !important; }
.svc-file > i:first-child { color: var(--hy-primary); font-size: 17px; }
.svc-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-file small { color: var(--hy-primary); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.svc-file:hover { border-color: var(--hy-primary-line); background: var(--hy-primary-soft); }

/* ---- aside cards (detail / work) ---- */
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--svc-gap); align-items: start; }
.svc-layout__main, .svc-layout__aside { display: grid; gap: var(--svc-gap); min-width: 0; }
.svc-status { display: grid; justify-items: center; gap: 6px; padding: 20px 16px; text-align: center; }
.svc-status__icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 2px; border-radius: 50%; background: var(--hy-primary-soft); color: var(--hy-primary); font-size: 22px; }
.svc-status[data-tone="success"] .svc-status__icon { background: #e6f7ef; color: var(--hy-success); }
.svc-status[data-tone="danger"]  .svc-status__icon { background: #ffe9ec; color: var(--hy-danger); }
.svc-status[data-tone="warning"] .svc-status__icon { background: #fff3da; color: var(--hy-warning); }
.svc-status[data-tone="neutral"] .svc-status__icon { background: #eef1f6; color: #5b6982; }
.svc-status h2 { font-size: 16px; font-weight: 950; }
.svc-status p { margin: 0; color: var(--hy-text); font-size: 12.5px; font-weight: 650; line-height: 1.75; }
.svc-status .hy-btn { width: 100%; margin-top: 8px; }
.svc-help { display: grid; gap: 8px; padding: 16px; }
.svc-help h2 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 900; }
.svc-help h2 i { color: var(--hy-primary); }
.svc-help__text { margin: 0; color: var(--hy-text); font-size: 12.5px; font-weight: 650; line-height: 1.75; }
.svc-help ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.svc-help li { display: flex; gap: 8px; color: var(--hy-text); font-size: 12px; font-weight: 650; line-height: 1.7; }
.svc-help li i { flex: none; margin-top: 3px; color: var(--hy-success); }
.svc-danger-zone { display: grid; justify-items: center; gap: 4px; padding: 4px 0; }
.svc-danger-zone small { color: var(--hy-subtle); font-size: 11px; font-weight: 700; text-align: center; }
.svc-linkbtn-danger { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--hy-danger) !important; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.svc-linkbtn-danger:hover { background: #fff2f3; }

/* choice cards */
.svc-choice-list { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.svc-choice { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hy-line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.svc-choice:hover { border-color: #b9c8db; }
.svc-choice:has(input:checked) { border-color: var(--hy-primary); background: var(--hy-primary-soft); box-shadow: 0 0 0 3px rgba(7, 95, 228, .1); }
.svc-choice input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--hy-primary); }
.svc-choice > span { display: grid; gap: 1px; min-width: 0; }
.svc-choice strong { color: var(--hy-ink); font-size: 13px; font-weight: 900; }
.svc-choice small { overflow: hidden; color: var(--hy-muted); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.svc-choice .svc-chip { margin-inline-start: auto; flex: none; }
.svc-choice .hy-link { margin-inline-start: auto; flex: none; }

/* ---- busy state ---- */
@keyframes svc-spin { to { transform: rotate(360deg); } }
/* A ring, not a rotated glyph: an icon font sits off-centre in its line box, so spinning the
   <i> makes the glyph orbit instead of turn. `font-size: 0` hides the glyph of an icon that
   is already in the markup, so a spinner can be dropped in without touching the view. */
.svc-spinner, .auth-btn__spinner, .hy-tool__loading i, form[data-submitting="true"] .workflow-submit-status i {
    display: inline-block;
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    font-size: 0;
    vertical-align: -.15em;
    opacity: .85;
    transform-origin: 50% 50%;
    animation: svc-spin .7s linear infinite;
}
.svc-spinner { width: 16px; height: 16px; }
.svc-page [aria-busy="true"] { pointer-events: none; opacity: .7; }

/* floating "new request" button (phones) */
.svc-fab { display: none; }

/* pagination */
.svc-pagination { display: flex; justify-content: center; padding: 12px 16px; border-top: 1px solid var(--svc-hair); }
.svc-pagination .pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.svc-pagination .page-link { display: grid; place-items: center; min-width: 36px; height: 36px; padding-inline: 8px; border: 1px solid var(--hy-line) !important; border-radius: 10px !important; background: #fff; color: #4c5a70 !important; font-size: 12px; font-weight: 800; text-decoration: none; }
.svc-pagination .active .page-link { border-color: var(--hy-primary) !important; background: var(--hy-primary) !important; color: #fff !important; }
.svc-pagination .disabled .page-link { opacity: .45; }

/* ---- app forms (account, settings, sheets) ---- */
.svc-form { display: grid; gap: 14px; }
.svc-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.svc-form__grid > .is-full { grid-column: 1 / -1; }
.svc-field { position: relative; display: grid; gap: 5px; min-width: 0; }
.svc-field > label { color: var(--hy-text); font-size: 12px; font-weight: 800; }
.svc-field > label .svc-field__req { margin-inline-start: 3px; color: var(--hy-danger); }
.harmony-app-shell .dashboard-content .svc-field input:not([type="checkbox"]):not([type="radio"]), .harmony-app-shell .dashboard-content .svc-field select, .harmony-app-shell .dashboard-content .svc-field textarea,
.svc-field input:not([type="checkbox"]):not([type="radio"]), .svc-field select, .svc-field textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--hy-line-strong); border-radius: 12px; background: #fff; color: var(--hy-ink); font: inherit; font-size: 13.5px; font-weight: 650; box-shadow: none; }
.svc-field textarea { min-height: 96px; line-height: 1.7; resize: vertical; }
.svc-field input:focus, .svc-field select:focus, .svc-field textarea:focus { border-color: var(--hy-primary); box-shadow: 0 0 0 4px rgba(7, 95, 228, .1); outline: 0; }
.svc-field input[readonly], .svc-field input:disabled, .svc-field select:disabled, .svc-field textarea:disabled { background: var(--hy-surface-soft); color: var(--hy-muted); }
.svc-field__hint { color: var(--hy-muted); font-size: 11.5px; font-weight: 650; line-height: 1.6; }
.svc-field__error { color: var(--hy-danger); font-size: 11.5px; font-weight: 750; line-height: 1.6; }
.svc-field__error:empty { display: none; }
.svc-field.is-invalid input, .svc-field.is-invalid select, .svc-field.is-invalid textarea, .svc-field .is-invalid { border-color: var(--hy-danger); }
.svc-field.is-invalid input:focus, .svc-field.is-invalid select:focus, .svc-field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgba(201, 52, 69, .12); }
.svc-field--inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.svc-field__affix { position: relative; }
.svc-field__affix > button { position: absolute; inset-inline-end: 6px; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--hy-muted); font-size: 15px; cursor: pointer; transform: translateY(-50%); }
.svc-field__affix > button:hover { background: var(--hy-surface-soft); color: var(--hy-ink); }
.svc-field__affix input { padding-inline-end: 44px; }
.svc-form__note { color: var(--hy-muted); font-size: 12px; font-weight: 650; line-height: 1.7; }
.svc-form__ok { display: inline-flex; align-items: center; gap: 6px; color: var(--hy-success); font-size: 12px; font-weight: 800; }

/* ---- toggle rows (settings) ---- */
.svc-toggle { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; color: inherit; cursor: pointer; }
.svc-toggle__text { display: grid; gap: 2px; min-width: 0; }
.svc-toggle__text strong { color: var(--hy-ink); font-size: 13.5px; font-weight: 850; }
.svc-toggle__text small { color: var(--hy-muted); font-size: 11.5px; font-weight: 650; line-height: 1.6; }
.svc-toggle input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; }
.svc-toggle__switch { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: #cfd8e3; transition: background .15s ease; }
.svc-toggle__switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 32, 68, .25); transition: transform .15s ease; }
.svc-toggle input:checked + .svc-toggle__switch { background: var(--hy-primary); }
.svc-toggle input:checked + .svc-toggle__switch::after { transform: translateX(-18px); }
html[dir="ltr"] .svc-toggle input:checked + .svc-toggle__switch::after { transform: translateX(18px); }
.svc-toggle input:focus-visible + .svc-toggle__switch { box-shadow: 0 0 0 4px rgba(7, 95, 228, .18); }
.svc-toggle input:disabled + .svc-toggle__switch { opacity: .5; }
.svc-toggle.is-busy { pointer-events: none; opacity: .7; }

/* ---- sheets: centred dialog on desktop, side drawer with --side, bottom sheet on phones ---- */
.svc-sheet { position: fixed; inset: 0; z-index: 1200; }
.svc-sheet[hidden] { display: none !important; }
.svc-sheet__backdrop { position: absolute; inset: 0; background: rgba(15, 32, 68, .45); opacity: 0; transition: opacity .18s ease; }
.svc-sheet__panel { position: absolute; top: 50%; inset-inline: 0; display: flex; flex-direction: column; width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 760px); margin-inline: auto; min-width: 0; border-radius: 18px; background: #fff; box-shadow: var(--hy-shadow-float); opacity: 0; outline: 0; transform: translateY(calc(-50% + 12px)); transition: transform .22s ease, opacity .18s ease; }
.svc-sheet.is-open .svc-sheet__backdrop { opacity: 1; }
.svc-sheet.is-open .svc-sheet__panel { opacity: 1; transform: translateY(-50%); }
.svc-sheet--side .svc-sheet__panel { top: 0; bottom: 0; inset-inline-start: auto; inset-inline-end: 0; width: min(480px, 100vw); max-height: none; margin: 0; border-radius: 0; transform: translateX(-24px); }
html[dir="ltr"] .svc-sheet--side .svc-sheet__panel { transform: translateX(24px); }
.svc-sheet--side.is-open .svc-sheet__panel { transform: none; }
.svc-sheet--lg .svc-sheet__panel { width: min(760px, calc(100vw - 32px)); }
.svc-sheet__grab { display: none; }
.svc-sheet__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; border-bottom: 1px solid var(--svc-hair, #eef2f6); }
.svc-sheet__head h2 { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--hy-ink); font-size: 15.5px; font-weight: 900; line-height: 1.4; }
.svc-sheet__head h2 small { display: block; margin-top: 2px; color: var(--hy-muted); font-size: 11.5px; font-weight: 700; }
.svc-sheet__head > i { color: var(--svc-accent, var(--hy-primary)); font-size: 18px; }
.svc-sheet__close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--hy-muted); font-size: 16px; cursor: pointer; }
.svc-sheet__close:hover { background: var(--hy-surface-soft); color: var(--hy-ink); }
.svc-sheet__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 18px; overscroll-behavior: contain; }
.svc-sheet__body > .svc-list { margin-inline: -18px; }
.svc-sheet__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--svc-hair, #eef2f6); background: #fff; border-radius: 0 0 18px 18px; }
.svc-sheet__foot .hy-btn { flex: 1 1 auto; min-height: 44px; }
body.svc-sheet-open { overflow: hidden; }

/* ---- popover menus ---- */
.svc-menu { position: fixed; z-index: 1150; min-width: 200px; max-width: min(320px, calc(100vw - 24px)); padding: 6px; border: 1px solid var(--hy-line); border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(15, 32, 68, .16); }
.svc-menu[hidden] { display: none !important; }
.svc-menu__label { padding: 6px 10px 2px; color: var(--hy-subtle); font-size: 10.5px; font-weight: 800; }
.svc-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--hy-text) !important; font: inherit; font-size: 13px; font-weight: 750; text-align: start; text-decoration: none !important; cursor: pointer; }
.svc-menu__item:hover, .svc-menu__item:focus-visible { background: var(--hy-surface-soft); color: var(--hy-ink) !important; outline: 0; }
.svc-menu__item.is-active { background: var(--hy-primary-soft); color: var(--hy-primary) !important; }
.svc-menu__item i { flex: none; width: 18px; color: var(--hy-muted); font-size: 14px; text-align: center; }
.svc-menu__item.is-active i { color: inherit; }
.svc-menu__item[data-tone="danger"] { color: var(--hy-danger) !important; }
.svc-menu__item[data-tone="danger"] i { color: inherit; }
.svc-menu__item[data-tone="danger"]:hover { background: var(--hy-danger-soft); }
.svc-menu__item small { margin-inline-start: auto; color: var(--hy-subtle); font-size: 11px; font-weight: 700; }
.svc-menu__item .svc-avatar { width: 28px; height: 28px; font-size: 11px; }
.svc-menu__sep { height: 1px; margin: 6px 4px; background: var(--svc-hair, #eef2f6); }
.svc-menu__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px 10px; }
.svc-menu__head strong { display: block; overflow: hidden; color: var(--hy-ink); font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.svc-menu__head small { display: block; overflow: hidden; color: var(--hy-muted); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

/* ---- avatars ---- */
.svc-avatar { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--hy-primary-soft); color: var(--hy-primary); font-size: 14px; font-weight: 900; line-height: 1; text-decoration: none !important; }
.svc-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.svc-avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.svc-avatar--xl { width: 96px; height: 96px; font-size: 32px; }

/* ---- one-time code boxes ---- */
.svc-otp { display: flex; justify-content: center; gap: 8px; direction: ltr; }
.svc-otp input { width: 44px; height: 54px; padding: 0; border: 1px solid var(--hy-line-strong); border-radius: 12px; background: #fff; color: var(--hy-ink); font: inherit; font-size: 22px; font-weight: 900; text-align: center; caret-color: var(--hy-primary); }
.svc-otp input:focus { border-color: var(--hy-primary); box-shadow: 0 0 0 4px rgba(7, 95, 228, .12); outline: 0; }
.svc-otp input.is-filled { background: var(--hy-surface-soft); }
.svc-otp.is-invalid input { border-color: var(--hy-danger); }
.svc-otp.is-busy input { opacity: .6; pointer-events: none; }

/* ---- action rows ---- */
.svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svc-actions__spacer { flex: 1 1 auto; }
.svc-actions--end { justify-content: flex-end; }
.svc-actions--center { justify-content: center; }
.svc-actions--sticky { position: sticky; z-index: 20; bottom: 10px; padding: 10px 12px; border: 1px solid var(--hy-line-strong); border-radius: 14px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); box-shadow: 0 12px 30px rgba(15, 32, 68, .12); }

/* ---- impersonation banner (shell) ---- */
.svc-impersonation { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 16px; border-bottom: 1px solid #f3dcae; background: #fff3da; color: #7a4a05; font-size: 12.5px; font-weight: 800; }
.svc-impersonation > i { color: #a86508; font-size: 16px; }
.svc-impersonation strong { color: #5b3603; font-weight: 900; }
.svc-impersonation small { color: #8a5a10; font-weight: 700; }
.svc-impersonation form { margin: 0; margin-inline-start: auto; }
.svc-impersonation .hy-btn { min-height: 32px; }

/* ====================================================================================
   responsive
   ==================================================================================== */
@media (max-width: 1023px) {
    .svc-cols, .svc-layout { grid-template-columns: minmax(0, 1fr); }
    /* the hero already says all of this on small screens */
    .svc-layout__aside .svc-status--aside { display: none; }
    .svc-tiles--icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .svc-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .svc-page { --svc-gap: 10px; }
    /* the topbar already shows the page title on phones */
    .svc-bar h1, .svc-bar--title-only { display: none; }
    .svc-bar { padding-inline: 14px; }
    .svc-page > .svc-back, .svc-page > .svc-greet, .svc-page > .svc-seg, .svc-page > .svc-tools, .svc-page > .svc-search, .svc-page > .svc-flash, .svc-page > .svc-note, .svc-page > .svc-danger-zone, .svc-page > .svc-actions { margin-inline: 12px; }
    .svc-page > .svc-tiles { padding-inline: 12px; }
    /* page-level sheets go edge to edge */
    .svc-page > .svc-section, .svc-page > .svc-cols > .svc-section, .svc-page > .svc-layout .svc-section, .svc-page > .svc-form > .svc-section, .svc-page > .board-shell { border-radius: 0; border-inline-width: 0; }
    .svc-greet h1 { font-size: 18px; }
    .svc-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 11px 14px; }
    .svc-row__main strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .svc-row > .svc-row__chev { display: none; }
    .svc-row__side { gap: 4px; }
    .svc-row--stack .svc-row__side { grid-column: 2; justify-items: start; text-align: right; }
    .svc-section__head, .svc-section__body, .svc-group > summary, .svc-group__body, .svc-help, .svc-status, .svc-hero, .svc-toggle { padding-inline: 14px; }
    .svc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-tiles--icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .svc-tile { padding: 12px; }
    .svc-seg a { min-height: 38px; }
    .svc-hero__cta .hy-btn { min-height: 48px; }
    .svc-kv > div { grid-template-columns: minmax(0, 1fr); gap: 1px; }
    .svc-layout__aside { grid-template-columns: minmax(0, 1fr); }
    .svc-form__grid { grid-template-columns: minmax(0, 1fr); }
    .svc-actions--sticky { position: fixed; z-index: 46; inset-inline: 0; bottom: 0; margin: 0 !important; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--hy-line); border-radius: 0; background: rgba(255, 255, 255, .98); box-shadow: 0 -10px 30px rgba(15, 32, 68, .1); }
    .svc-actions--sticky .hy-btn { flex: 1 1 calc(50% - 8px); min-height: 44px; }
    .svc-actions--sticky .hy-btn:first-child { flex-basis: 100%; min-height: 48px; }
    .svc-actions--sticky .svc-actions__spacer { display: none; }
    body.svc-has-sticky-actions .dashboard-content.harmony-content { padding-bottom: 160px !important; }
    /* every sheet becomes a bottom sheet */
    .svc-sheet__panel, .svc-sheet--side .svc-sheet__panel, .svc-sheet--lg .svc-sheet__panel { top: auto; bottom: 0; inset-inline: 0; width: 100%; max-height: 92dvh; margin: 0; border-radius: 20px 20px 0 0; transform: translateY(24px); }
    .svc-sheet.is-open .svc-sheet__panel { transform: none; }
    .svc-sheet__grab { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 999px; background: #d3dbe6; }
    .svc-sheet__head { padding-top: 8px; }
    .svc-sheet__foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 0; }
    .svc-menu { max-width: calc(100vw - 16px); }
    /* floating action button above the bottom bar */
    .svc-fab { position: fixed; z-index: 43; inset-inline-start: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 10px 18px; border-radius: 999px; background: var(--hy-primary); color: #fff !important; font-size: 13.5px; font-weight: 900; text-decoration: none !important; box-shadow: 0 12px 28px rgba(7, 95, 228, .35); }
    .svc-fab i { font-size: 16px; }
    body.svc-has-fab .dashboard-content.harmony-content { padding-bottom: 150px !important; }
    /* the floating button replaces the page-bar action on phones */
    body.svc-has-fab .svc-page > .svc-bar { display: none; }
    .svc-pagination .page-link { min-width: 40px; height: 40px; }
}
@media (max-width: 380px) {
    .svc-tiles--icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .svc-tiles--icons .svc-tile { padding: 10px 6px; }
    .svc-otp { gap: 6px; }
    .svc-otp input { width: 40px; height: 50px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .svc-page *, .svc-page *::before, .svc-page *::after, .svc-sheet *, .svc-toggle * { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}