/* AI-Call Assistant: the product's own screens. The frame, cards, tables and
   buttons are SMS Reminder's (its base.html and Patient Info screen) in the
   product's teal; the Dashboard is the public pages' sample screen
   (templates/ai_assist/landing_el.html). */
:root {
    --white:      #ffffff;
    --teal:       #1b7987;
    --green:      #2b8b78;
    --teal-deep:  #125059;
    --teal-dark:  #0e3d44;
    --teal-hover: #1a5560;
    --teal-tint:  #eefafc;
    --green-tint: #effaf8;
    --green-soft: #c1ece3;
    --mint:       #34E0C8;
    --line:       #e2e9e8;
    --ground:     #f1f4f3;
    --bg:         #edf2f2;
    --ink:        #222b2a;
    --ink-soft:   #485b59;
    --ink-faint:  #65817d;
    --head:       #2b6e8b;
    --grad:       linear-gradient(135deg, #1b7987, #2b8b78);
    --grad-dark:  linear-gradient(135deg, #0f434b, #1f6557);
    --grad-name:  linear-gradient(135deg, #16636e, #33a48d);
    --grad-light: linear-gradient(135deg, #9FCBFF, #34E0C8);
    --gloss:      linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 45%, rgba(0,0,0,0.18) 100%);
    --gloss-shadow: 0 2px 0 rgba(0,0,0,0.22), 0 4px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
    --card-shadow: 0 2px 12px rgba(0,0,0,0.07);
    --ok:         #1b7987;
    --bar:        56px;
    --side:       calc(260px - 0.5cm);
    --tabbar:     64px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
body.app { background: var(--bg); }
a { color: inherit; text-decoration: none; }
.brand { font-family: 'Orbitron', sans-serif; font-weight: 700; background: var(--grad-name); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--teal); white-space: nowrap; }

/* Buttons: SMS Reminder's (gl-ok / gl-cancel / gl-del in its base.html), an
   icon and a bold label, the same gloss, teal where that one is navy. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 6px; padding: 6px 14px; font: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: pointer; color: #fff; background-image: var(--gloss); box-shadow: var(--gloss-shadow); text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.btn:hover { filter: brightness(1.08); }
.btn:active { box-shadow: 0 1px 0 rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5); transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; }
.gl-ok { background-color: var(--ok); border-color: var(--ok); }
.gl-cancel { background-color: #e8584d; border-color: #e8584d; }
.gl-del { background-color: #dc2626; border-color: #dc2626; }
.btn-sm { padding: 3px 10px; font-size: 0.82rem; border-radius: 5px; }
.btn-block { display: flex; width: 100%; padding: 9px 14px; }

/* The two flags */
.flags { display: flex; align-items: center; gap: 8px; }
.flags form { margin: 0; line-height: 0; }
.flag-btn { display: inline-flex; align-items: center; line-height: 0; padding: 4px; border-radius: 6px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: border-color 0.2s; }
.flag-btn:hover, .flag-btn.on { border-color: var(--teal); }
.nav-flag { display: block; width: 24px; height: 16px; border-radius: 2px; object-fit: cover; opacity: 0.7; transition: opacity 0.2s; }
.flag-btn:hover .nav-flag, .flag-btn.on .nav-flag { opacity: 1; }

/* The frame: a dark bar along the top, the menu down the left */
.top { position: sticky; top: 0; z-index: 30; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; background: var(--teal-dark); }
.top .brand { font-size: 1.1rem; background-image: var(--grad-light); color: #9FCBFF; }
.top-left { display: flex; align-items: center; gap: 0; min-width: 0; }
/* The brand fills the menu's column (--side, less the bar's 20px) plus the page's own margin (24px), so the line pill starts where the page content starts */
.top-left .brand { flex: 0 0 calc(var(--side) + 4px); }
.top-logo { display: flex; align-items: center; }
.top-logo img { display: block; width: auto; }
.top .top-logo img { height: 38px; }
.top-left .top-logo { flex: 0 0 calc(var(--side) + 4px); }
.top-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-right form { margin: 0; }
.who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .flag-btn { background: transparent; border-color: rgba(255,255,255,0.25); }
.top .flag-btn:hover, .top .flag-btn.on { border-color: var(--mint); }
.btn-logout { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; background: transparent; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); font: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.btn-logout:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); color: #fff; }
.help-icon { color: #e8a87c; }
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); align-items: start; }
/* scrollbar-gutter: the dashboard's longer menu scrolls; the gutter is kept on every page, so the menu never changes width when you switch */
.side { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); overflow-y: auto; scrollbar-gutter: stable; padding: 8px 0; background: var(--teal-dark); }
.side a { display: flex; align-items: center; gap: 10px; padding: 5px 20px; color: #b9d3d3; font-size: 0.9rem; transition: all 0.2s; }
.side a i { font-size: 1rem; flex: none; }
.side a:hover, .side a.on { background: var(--teal-hover); color: #fff; }
.side a.on { border-left: 3px solid var(--mint); padding-left: 17px; font-weight: 600; }
/* The Dashboard's buttons explained, at the foot of the menu */
.side { display: flex; flex-direction: column; }
.side > * { flex: none; }
.legend { margin-top: auto; margin-bottom: 2cm; padding: 8px 20px 2px; border-top: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 0.8rem; }
.legend p { margin: 0; }
.legend .legend-title { margin-bottom: 6px; font-weight: 700; color: #fff; }
.legend-row { display: flex; align-items: center; gap: 10px; line-height: 1.25; }
.legend .legend-row { margin-bottom: 6px; }
.legend-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 0.8rem; box-shadow: var(--gloss-shadow); }
.legend-counted { margin-bottom: calc(1in - 1cm); }
.side-count { display: flex; align-items: center; gap: 10px; margin: 0 0 0.5cm; padding: 10px 20px; border-top: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.side-count i { flex: none; color: var(--mint); }
.side-count.is-over { color: #ffc107; }
.page { min-width: 0; padding: 25px 24px 60px; }
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
/* Every title (page, card, panel, window) is Fira Sans 600: it has Greek, so a title reads the same on every device */
.page-title { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--teal-deep); overflow-wrap: anywhere; }
.page-title i { font-size: 1.25rem; }
.page-sub { margin: -14px 0 22px; }

/* Cards: a white box under a dark bar that names it */
.card { background: #fff; border-radius: 12px; box-shadow: var(--card-shadow); margin-bottom: 24px; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--grad-dark); color: #fff; border-radius: 12px 12px 0 0; font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em; }
.card-head h2 { margin: 0; font: inherit; }
.card-head i { margin-right: 8px; }
.card-body { padding: 20px; }
.card-body > :last-child { margin-bottom: 0; }
.card-foot { padding: 14px 20px; border-top: 1px solid var(--line); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.count-badge { flex: none; padding: 3px 11px; border-radius: 999px; background: var(--gloss), #ffc107; color: #222b2a; font-size: 0.78rem; font-weight: 700; box-shadow: var(--gloss-shadow); }
.empty { margin: 0; color: var(--ink-faint); text-align: center; padding: 44px 20px; }
.empty i { display: block; font-size: 2.5rem; margin-bottom: 6px; }

/* Tables: SMS Reminder's list of records */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { padding: 10px 12px; background: #f6f9f9; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.tbl td { padding: 6px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:first-child td { border-top: 0; }
.tbl tbody tr:hover td { background: #f3f9fa; }
.tbl th:first-child, .tbl td:first-child { padding-left: 20px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 20px; }
.tbl .t-act { text-align: right; }
/* The buttons wrap to a second row before the name and the email lose their width (iPad mini landscape) */
.tbl td.t-wide { min-width: 10rem; }
@media (min-width: 1025px) { .tbl .t-act:not(:has(.ico)) { width: 23rem; } }
/* The callers' buttons are round icons on a tablet in landscape too, as on a phone; the wording is the tooltip */
@media (min-width: 1025px) and (max-width: 1365.98px) {
    .tbl .t-act .btn.ico { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.05rem; }
    .tbl .t-act .btn.ico .mini-label { display: none; }
}
.tbl .t-act form { display: inline; margin: 0; }
.tbl .t-act .btn { margin: 2px 0 2px 4px; }
/* Names in Fira Sans regular, as on SMS Reminder's lists: it has Greek, so a Greek and an English name match (DM Sans has none). */
.t-name { font-family: 'Fira Sans', sans-serif; font-weight: 400; color: var(--ink); overflow-wrap: anywhere; }
.t-quiet { color: var(--ink-faint); font-size: 0.9rem; overflow-wrap: anywhere; }
.t-label { display: none; }
/* A number or a date in a list: the glossy pill of SMS Reminder's lists */
.dpill { display: inline-block; padding: 1px 12px; border-radius: 999px; background: var(--gloss), var(--teal); color: #fff; font-size: 0.85rem; font-weight: 700; text-align: center; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,0.25); box-shadow: var(--gloss-shadow); }
.dpill-number { min-width: 150px; }
/* A request's number and time on the Dashboard */
.dpill-call { background: var(--gloss), #1b3187; }
.dpill-day { min-width: 176px; background: var(--gloss), var(--head); }
.dpill-day.dpill-short { min-width: 110px; }
.rq-pages { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; padding: 14px 20px; border-top: 1px solid var(--line); font-weight: 700; color: var(--teal-deep); }
.rq-older { margin: 0; padding: 14px 20px; border-top: 1px solid var(--line); text-align: center; }
.rq-back { margin: 0 0 14px; }

/* The search box */
.search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.search input { flex: 0 1 520px; min-width: 0; }
/* EVERY field of the product is this one rule: a new field never gets its own. */
.page input:not([type=checkbox], [type=hidden]), .page textarea, .page select, .modal-card input:not([type=checkbox], [type=hidden]), .modal-card textarea, .login-card input { font: inherit; color: var(--ink); padding: 7px 12px; border: 1px solid #c9d6d4; border-radius: 6px; background: #fff; }
.page input:not([type=checkbox], [type=hidden]):focus, .page textarea:focus, .page select:focus, .modal-card input:focus, .modal-card textarea:focus, .login-card input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(27,121,135,0.18); }
/* A field that is shown and cannot be changed */
.page input[readonly]:not([type=hidden]), .page input[readonly]:not([type=hidden]):focus { background: var(--ground); color: var(--ink-soft); border-color: var(--line); box-shadow: none; cursor: default; }

/* Forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; font-size: 0.88rem; }
.field input, .field textarea { width: 100%; }
.field textarea { resize: vertical; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.explain { margin: 0 0 16px; color: var(--ink-faint); font-size: 0.9rem; }
.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.plain-line { margin: 0 0 6px; font-weight: 600; color: var(--ink); }
.help-text { margin: 0; line-height: 1.65; color: var(--ink-soft); }
.of-who { color: var(--ink-soft); font-weight: 600; }

/* The More page (phone) */
.more-list { display: flex; flex-direction: column; gap: 10px; }
.more-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 12px 18px; background: #fff; border-radius: 12px; box-shadow: var(--card-shadow); font-weight: 600; color: var(--teal-deep); }
.more-row > span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.more-row > i { color: var(--ink-faint); }
.more-list form { margin: 0; }

/* The login page */
.login-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffff 0%, var(--teal-tint) 100%); }
.login-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 5%; }
.login-top .brand { font-size: 1.2rem; }
.login-top .top-logo img { height: 48px; }
.login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 16px 60px; }
.login-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--teal); border-radius: 14px; box-shadow: 0 24px 60px rgba(14,61,68,0.16); padding: 34px 32px 30px; }
.login-card h1 { font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 1.8rem; color: var(--teal-deep); margin: 0 0 22px; text-align: center; }
.login-card .field input { padding: 11px 14px; }
/* The eye in a password field shows what was typed (SMS Reminder's sign-in page has the same) */
.pw-wrap { position: relative; }
.login-card .pw-wrap input { padding-right: 48px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-faint); font-size: 1.15rem; cursor: pointer; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--teal); }
.pw-eye:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(27,121,135,0.18); }
.login-box { width: 100%; max-width: 440px; }
/* The two home links under the card: a desktop only; a phone shows the card and the flags, nothing else */
.login-links { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; }
/* What the product does, at the left of the card: a desktop only, as on SMS Reminder's sign-in page */
.login-side { display: none; }
.login-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.login-split .login-top { justify-content: flex-end; }
@media (min-width: 900px) {
    .login-split { flex-direction: row; }
    .login-side { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; width: 45%; padding: 3rem; background: var(--grad-dark); color: #fff; }
    .login-side .brand { display: inline-block; margin-bottom: 3.5rem; font-size: 1.3rem; background-image: var(--grad-light); color: #9FCBFF; }
    .login-logo { display: inline-block; margin-bottom: 3.5rem; }
    .login-logo img { display: block; height: 64px; width: auto; }
    .login-head { margin: 0 0 1.2rem; font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 2.4rem; line-height: 1.25; color: #fff; }
    .login-say { margin: 0; max-width: 520px; font-size: 0.95rem; line-height: 1.7; color: rgba(255,255,255,0.75); }
    /* The pill at the end of that sentence: SMS Reminder's «see how it works», in the product's mint */
    .login-demo { display: inline-block; margin-left: 4px; padding: 3px 12px; border: 1px solid rgba(52,224,200,0.4); border-radius: 999px; background: rgba(52,224,200,0.1); color: var(--mint); font-size: 0.8rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
    .login-demo:hover { background: rgba(52,224,200,0.2); }
    .login-points { list-style: none; margin: 0; padding: 0 0 2cm; }
    .login-points li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1.1rem; font-size: 0.88rem; line-height: 1.5; color: rgba(255,255,255,0.75); }
    .login-points i { flex: none; margin-top: 2px; font-size: 1rem; color: var(--mint); }
    .login-points strong { display: block; margin-bottom: 2px; color: #fff; }
    .login-links { display: flex; }
    /* A desktop: a shorter card, set higher, so the register box and the two home links fit on the one screen */
    .login-split .login-top { padding-block: 12px; }
    .login-split .login-main { align-items: flex-start; padding: 4px 16px 24px; }
    .login-split .login-card { padding: 22px 32px 20px; }
    .login-split .login-card h1 { font-size: 1.6rem; margin-bottom: 14px; }
    .login-split .login-card .field { margin-bottom: 12px; }
    .login-split .login-card .field input { padding: 9px 14px; }
    .login-split .login-note { margin-top: 12px; }
    .login-split .login-or { margin: 16px 0 12px; }
    .login-split .login-new { padding: 16px 22px; }
    .login-split .login-new p { margin-bottom: 10px; }
    .login-split .login-links { margin-top: 14px; }
}
.login-note { margin: 20px 0 0; font-size: 0.92rem; color: var(--ink-faint); text-align: center; }

/* The small window: a dark bar with its title, the buttons at the right */
.modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(14,61,68,0.55); align-items: center; justify-content: center; padding: 16px; }
.modal.open { display: flex; }
.modal-card { --mx: 24px; --my: 22px; background: #fff; border-radius: 12px; padding: var(--my) var(--mx); width: 100%; max-width: 460px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.modal-card:not(:has(> h2, > .open-head)) { border-top: 5px solid var(--teal); }
.modal-card > h2 { margin: calc(-1 * var(--my)) calc(-1 * var(--mx)) 18px; padding: 14px 20px; min-height: 50px; background: var(--grad-dark); color: #fff; border-radius: 12px 12px 0 0; font: inherit; font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.4; }
.modal-card p { margin: 0 0 18px; overflow-wrap: anywhere; }
.modal-card > .btn { display: flex; width: fit-content; min-width: 110px; margin-left: auto; }
.modal-buttons { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal-buttons .btn { min-width: 110px; }
/* A window opened from inside the eye sits above it */
.modal-top { z-index: 110; }

/* The Dashboard: the panel of the public pages' sample screen. A dark bar with
   the filters, a grey line per day, one line per request. */
.rq-root { --head-h: 58px; }
.rq-count { display: none; width: fit-content; margin: 0 0 12px auto; padding: 4px 14px; border-radius: 999px; background: #fff; box-shadow: var(--card-shadow); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); overflow-wrap: anywhere; }
.rq-count.is-over { color: #b4541a; }
.screen { background: #fff; border-radius: 12px; box-shadow: var(--card-shadow); margin-bottom: 24px; }
.screen-head { position: sticky; top: var(--bar); z-index: 12; height: var(--head-h, 58px); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; background: var(--grad-dark); color: #fff; border-radius: 12px 12px 0 0; }
.screen-head .screen-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; margin: 0; font: inherit; line-height: 1.5; color: #fff; white-space: nowrap; }
.screen-title strong { font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 1.05rem; }
.biz { font-size: 0.85rem; font-weight: 600; color: #d9f3f7; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rq-filters { display: flex; gap: 6px; flex: none; }
.flt { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 4px 12px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; background: var(--gloss), var(--teal); box-shadow: var(--gloss-shadow); text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.flt:hover { filter: brightness(1.08); }
.flt.on { background: var(--gloss), #fff; color: var(--teal-deep); text-shadow: none; }
.of-screen .screen-head { position: static; }
.rq-dayhead { position: sticky; top: calc(var(--bar) + var(--head-h)); z-index: 11; margin: 0; padding: 8px 20px; background: var(--ground); border-top: 1px solid var(--line); font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.rq-day:first-child .rq-dayhead { border-top: 0; }
/* A request is a box of its own, every second one on the pale teal, so two callers never read as one */
.rq { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; margin: 12px 14px; padding: 12px 16px; background: #fff; border: 1px solid #cddbd9; border-left: 5px solid var(--teal); border-radius: 10px; box-shadow: var(--card-shadow); }
.rq:nth-of-type(even) { background: var(--teal-tint); border-left-color: var(--head); }
.rq-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
/* The name with its number and time: one block on a desktop, the pills straight after it */
.rq-who { display: contents; }
.rq-name { font-weight: 700; color: var(--head); min-width: 0; overflow-wrap: anywhere; }
.rq-meta { color: var(--ink-faint); font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.rq-call:hover { color: var(--teal); text-decoration: underline; }
.dpill.rq-call:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }
.badge { flex: none; font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; box-shadow: var(--gloss-shadow); }
.badge-new { background: var(--gloss), var(--grad); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.badge-held { background: var(--gloss), #bbeaf1; color: var(--teal-deep); }
.badge-done { background: var(--gloss), var(--line); color: var(--ink-soft); }
.badge-on { background: var(--gloss), #198754; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.mark { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--gloss), #bbeaf1; color: var(--teal-deep); box-shadow: var(--gloss-shadow); white-space: nowrap; }
.mark-new { background: var(--gloss), var(--green-soft); }
.mark-hours { background: var(--gloss), #1f6557; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.mark-plain { background: none; box-shadow: none; padding: 0; color: var(--ink-faint); font-weight: 600; white-space: normal; }
/* Each wording in two forms: the full one on a desktop, the short one on a phone (`.w-desk` / `.w-phone`, switched in the phone block) */
.w-phone { display: none; }
.rq-side { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.rq-text { grid-column: 1 / -1; color: var(--ink-soft); font-size: 0.95rem; overflow-wrap: anywhere; }
.rq-text p { margin: 0 0 3px; }
.rq-text p:last-child { margin-bottom: 0; }
/* Several calls in one request: the time, the small button, then the texts all starting on one line */
.rq-text .rq-line { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
.rq-calltime { flex: none; min-width: 62px; font-variant-numeric: tabular-nums; }
.dpill.rq-calltime { background: var(--gloss), #008da2; }
.rq-linetext { min-width: 0; padding-top: 1px; }
.rq-note { margin: 5px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.rq-note strong { color: var(--head); }
.rq.is-closed .rq-name, .rq.is-closed .rq-text { color: var(--ink-faint); }
/* A request's buttons: the sample screen's small bold pills */
.mini { display: inline-flex; align-items: center; justify-content: center; flex: none; font: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1.5; white-space: nowrap; border: 0; border-radius: 999px; padding: 6px 16px; cursor: pointer; color: #fff; box-shadow: var(--gloss-shadow); text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.mini:hover { filter: brightness(1.08); }
.mini:active { box-shadow: 0 1px 0 rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5); transform: translateY(1px); }
.mini-take { background: var(--gloss), var(--grad); }
.mini-done { background: var(--gloss), var(--teal-deep); }
.mini-back { background: var(--gloss), #e8584d; }
.mini-icon { padding: 0; width: 34px; height: 34px; font-size: 1rem; background: var(--gloss), var(--grad); }
.mini-split { padding: 0; width: 24px; height: 24px; font-size: 0.72rem; background: var(--gloss), #e8584d; }

/* The eye */
.modal-wide .modal-card { max-width: 760px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.open-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: calc(-1 * var(--my)) calc(-1 * var(--mx)) 16px; padding: 12px 20px; background: var(--grad-dark); color: #fff; border-radius: 12px 12px 0 0; }
.open-head .rq-name { display: block; font-size: 1.1rem; color: #fff; }
.open-head .rq-number { font-size: 0.9rem; font-weight: 600; color: #d9f3f7; }
.open-head .rq-call:hover { color: #fff; }
.open-day { color: #d9f3f7; font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.open-marks { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 8px; }
.open-card h3 { margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--green-soft); font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--teal-deep); }
.open-card audio { display: block; width: 100%; height: 44px; }
.open-card p { margin: 0 0 10px; }
.open-transcript { white-space: pre-line; overflow-wrap: anywhere; }
.open-quiet { color: var(--ink-faint); font-size: 0.9rem; }
.open-history ul { list-style: none; margin: 0; padding: 0; color: var(--ink-soft); font-size: 0.92rem; }
.open-history li { padding: 5px 8px; }
.open-history li:nth-child(odd) { background: #f6f9f9; }
.open-eventnote { display: block; color: var(--ink); overflow-wrap: anywhere; }
.open-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.open-foot .btn:last-child { margin-left: auto; }

/* Opening hours: the concept of SMS Reminder's schedule screen. A switch per
   part (Monday to Friday, a weekday of its own, Saturday, Sunday); switched
   on, it shows that part's two times. */
.toggle { position: relative; display: inline-block; flex: none; width: 52px; height: 28px; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-track { position: absolute; inset: 0; background: #dee2e6; border-radius: 28px; transition: 0.25s; pointer-events: none; }
.toggle-track::before { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.25s; }
.toggle input:checked + .toggle-track { background: var(--ok); }
.toggle input:checked + .toggle-track::before { transform: translateX(24px); }
.toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px rgba(27,121,135,0.3); }
.hr-part { padding: 16px 0; border-top: 1px solid var(--line); }
.hr-part:last-of-type { padding-bottom: 20px; }
.hr-switch { display: flex; align-items: center; gap: 14px; }
.hr-title { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.hr-text { color: var(--ink-faint); font-size: 0.85rem; }
.hr-times { display: grid; grid-template-columns: repeat(2, 160px); gap: 14px; margin-top: 12px; padding-left: 66px; }
.hr-times input, .hr-times select { width: 100%; }
/* The same pair of fields outside the hours box (closed days: from, to), its button on the same line */
.hr-flat { grid-template-columns: 160px 160px auto; align-items: end; justify-content: start; margin-top: 0; padding-left: 0; }
/* A row of several such fields (the Status Report's filters), wrapping as the page narrows */
.hr-wide { grid-template-columns: repeat(auto-fill, 160px); }
.hr-label { display: block; margin-bottom: 5px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.hr-own-row { margin-top: 10px; }
.hr-own { padding-left: 66px; margin-top: 10px; }
.hr-own .hr-title { font-weight: 500; }

/* Phone, and a tablet held upright: the menu becomes a bar along the bottom */
@media (max-width: 1024px) {
    body.app { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px)); }
    .shell { display: block; }
    .side, .top-right .flags, .top .help-label { display: none; }
    /* The phone's top bar is two lines: the name with Help and Sign out, then the line and the login.
       The groups are dissolved (display: contents) so the four pieces sit in one grid. */
    :root { --bar: 84px; }
    .top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand help out" "line user user"; align-content: center; gap: 6px 8px; height: var(--bar); padding: 0 14px; }
    .top-left, .top-right { display: contents; }
    .top .brand { grid-area: brand; font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .top .top-logo { grid-area: brand; min-width: 0; }
    .top .top-logo img { height: 32px; }
    .top-left .who { grid-area: line; }
    .top-right > .who { grid-area: user; justify-self: end; }
    .top-right > a.btn-logout { grid-area: help; }
    .top-right > form { grid-area: out; }
    .w-desk { display: none; }
    .w-phone { display: inline; }
    .mark-desk { display: none; }
    .page { padding: 16px 12px 28px; }
    .page-head { margin-bottom: 16px; }
    .page-title { font-size: 1.3rem; }
    .cards, .fields { grid-template-columns: minmax(0, 1fr); }
    .card, .screen { margin-bottom: 16px; }
    .card-body { padding: 16px 14px; }
    .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--teal-dark); box-shadow: 0 -6px 18px rgba(14,61,68,0.18); }
    .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 0.78rem; font-weight: 600; color: #b9d3d3; }
    .tab i { font-size: 1.35rem; line-height: 1; }
    .tab.on { color: var(--mint); }
    .login-card { padding: 26px 20px 24px; }
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; padding: 5px 12px; font-size: 0.88rem; }
    .page input:not([type=checkbox], [type=hidden]), .page textarea, .page select, .modal-card input:not([type=checkbox], [type=hidden]), .modal-card textarea { min-height: 46px; }
    .search input, .inline input { flex: 1 1 100%; }
    .search .btn, .inline .btn { flex: 1 1 auto; }
    /* A table becomes one block a record */
    .tbl, .tbl tbody, .tbl td { display: block; }
    .tbl thead { display: none; }
    .tbl tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
    .tbl tbody tr:first-child { border-top: 0; }
    .tbl td, .tbl td:first-child, .tbl td:last-child { padding: 0; border: 0; }
    .tbl tbody tr:hover td { background: none; }
    .tbl .t-wide, .tbl .t-act { flex: 1 1 100%; }
    .tbl .t-act { text-align: left; white-space: normal; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .tbl .t-act form { display: flex; flex: 1 1 auto; }
    .tbl .t-act .btn { flex: 1 1 auto; margin: 0; }
    .t-label { display: inline; }
    .dpill-number, .dpill-day, .dpill-day.dpill-short { min-width: 0; }
    .dpill { font-size: 0.95rem; padding: 3px 14px; }
    /* The small windows take the whole width and start at the top, so the
       keyboard covers neither the field nor the buttons */
    .modal { align-items: flex-start; padding: 12px; overflow-y: auto; }
    .modal-card { --mx: 16px; --my: 18px; max-width: none; }
    .modal-buttons .btn, .modal-card > .btn { flex: 1 1 0; min-height: 48px; }
    .modal-card > .btn { width: 100%; }
    .modal-wide { padding: 0; }
    .modal-wide .modal-card { min-height: 100vh; min-height: 100dvh; max-height: none; border-radius: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
    .open-head { border-radius: 0; }
    .open-card audio { height: 56px; }
    .open-foot { position: sticky; bottom: 0; background: #fff; padding: 12px 0 0; }
    .open-foot .btn { min-height: 48px; flex: 1 1 auto; }
    .hr-times { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }
    .hr-flat .btn { grid-column: 1 / -1; }
    .hr-own { padding-left: 0; }
}
/* A tablet in landscape: the hours box is narrower than its two 160px fields and the indent, so they share the width and the indent goes */
@media (min-width: 1025px) and (max-width: 1365.98px) {
    .hr-times:not(.hr-wide) { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }
    .hr-flat .btn { grid-column: 1 / -1; justify-self: start; }
    .hr-own { padding-left: 0; }
}
@media (min-width: 1025px) {
    .tabbar { display: none; }
    /* A request on a desktop: along the top the name with its number and time, then the pills one after the other and the state at
       the far right; under them the text, with the round buttons at its right */
    .rq { grid-template-areas: "head head" "text side"; }
    .rq-head { grid-area: head; }
    .rq-who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; min-width: 0; margin-right: 6px; }
    /* The name has a set width, so every request's number starts at the same place; one with no name leaves that room empty.
       A longer name is cut with dots and read whole in its tooltip */
    .rq-who > .rq-name { flex: none; width: 165px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rq-who > .rq-call { min-width: 130px; }
    .rq-who > .rq-call:first-child { margin-left: 185px; }
    .rq-head > .rq-state { margin-left: auto; }
    .rq-text { grid-area: text; }
    .rq-side { grid-area: side; align-self: start; }
    /* The presses are round icons here; the wording is the tooltip */
    .mini-act { padding: 0; width: 34px; height: 34px; font-size: 1rem; }
    .mini-act .mini-label { display: none; }
    .flt i, .legend-btn { display: none; }
    .flt-n { margin-left: 4px; }
    .flt-n::before { content: "("; }
    .flt-n::after { content: ")"; }
}

/* ══════════ THE DASHBOARD ON A PHONE ══════════
   Everything the phone's Dashboard has of its own is in this block; nothing in
   it reaches a desktop. The panel goes edge to edge, a request takes the full
   width, every press is a round icon as on a desktop, and what each one does
   is in the window the fading pill opens. */
@keyframes legendBreathe {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 1; }
}
@media (max-width: 1024px) {
    .rq-root { --head-h: 112px; }
    .rq-root.is-older { --head-h: 48px; }
    .rq-count { display: block; margin-left: 0; border-radius: 12px; }
    .screen-head { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 0 10px; }
    .of-screen .screen-head { height: 48px; }
    /* The filters: four tiles in one row, the icon and its number over the name */
    .rq-filters .flt { flex: 1 1 0; min-width: 0; min-height: 52px; display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; align-items: center; gap: 1px 6px; padding: 5px 3px; border-radius: 12px; }
    .flt i { grid-area: 1 / 1; font-size: 1.05rem; line-height: 1; }
    .flt-n { grid-area: 1 / 2; font-size: 1.05rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
    .flt-label { grid-area: 2 / 1 / 3 / 3; min-width: 0; font-size: 0.68rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rq-dayhead { padding: 8px 14px; }
    /* One request, in this order: the caller's name and number; the pills and the round buttons on one line; a divider;
       the time and icons of each call; the text. The head is dissolved so its pieces take the card's lines */
    .rq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 8px; padding: 12px 12px 10px; }
    .rq-head { display: contents; }
    .rq-head .badge, .rq-head .mark { padding: 2px 6px; }
    /* The caller's name breaks between words, never inside one: the number wraps under it when the row is narrow */
    .rq-who { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
    .rq-who > .rq-name { flex: 0 1 auto; min-width: min-content; overflow-wrap: normal; font-size: 1.1rem; line-height: 1.3; }
    .rq-who > .rq-call { flex: none; }
    .rq-meta { font-size: 1rem; }
    .rq-meta .rq-call, a.rq-name.rq-call { display: inline-block; padding: 4px 0; color: var(--teal); font-weight: 700; text-decoration: underline; }
    .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .rq-text { flex: 1 1 100%; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 1.02rem; line-height: 1.45; }
    .rq-text .rq-line { flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
    .rq-calltime { margin-top: 0; }
    .rq-linetext { flex: 1 1 100%; padding-top: 0; }
    .mini-split { width: 34px; height: 34px; font-size: 0.9rem; }
    /* The presses: round, all of them at the right */
    .rq-side { flex: none; margin-left: auto; gap: 6px; }
    .rq-side .mini { width: 42px; height: 42px; padding: 0; font-size: 1.2rem; }
    .mini-act .mini-label { display: none; }
    /* The pill that explains the buttons: above the bottom bar, fading out and back until pressed */
    .legend-btn { gap: 8px; position: fixed; right: 12px; bottom: calc(var(--tabbar) + 14px + env(safe-area-inset-bottom, 0px)); z-index: 25; min-height: 44px; padding: 8px 18px; font-size: 0.92rem; box-shadow: var(--gloss-shadow), 0 10px 22px -10px rgba(14,61,68,0.7); }
    .legend-btn.is-hint { animation: legendBreathe 7s ease-in-out infinite; }
    /* Its window: an icon, the button's name, what it does */
    .legend-card .legend-row { align-items: flex-start; gap: 12px; margin: 0 0 12px; }
    .legend-card .legend-icon { width: 34px; height: 34px; font-size: 1rem; }
    .legend-what { min-width: 0; font-size: 0.92rem; line-height: 1.35; color: var(--ink-soft); }
    .legend-what strong { display: block; color: var(--ink); }
    .legend-card > .btn { margin-top: 18px; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .legend-btn.is-hint { animation: none; }
}

/* ══════════ CUSTOMERS ON A PHONE ══════════
   The same idea as the Dashboard: a button marked .ico is a round icon here,
   its wording kept for the desktop and for the «buttons» window. */
@media (max-width: 1024px) {
    .ico { flex: none; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.2rem; }
    .ico .mini-label { display: none; }
    .search .btn.ico, .inline .btn.ico, .tbl .t-act .btn.ico { flex: none; }
    /* The search: the field takes the row, the round buttons beside it */
    .search:has(.ico) { flex-wrap: nowrap; }
    .search:has(.ico) input { flex: 1 1 0; }
    /* A customer's line: the round button at the right of the number and the last request, not a row of its own */
    .tbl .t-act:has(.ico) { flex: 0 0 auto; margin: 0 0 0 auto; }
    /* The caller list: the name and the number share the first line, the name shrinks and wraps first */
    .tbl tr:has([data-open="cuEdit"]) > td.t-wide { flex: 0 1 auto; min-width: 0; }
    .tbl tr:has([data-open="cuEdit"]) td:has(> .dpill-number) { flex: none; }
    /* One customer: the name, the round buttons at its right */
    .page-head:has(.ico) { flex-wrap: nowrap; align-items: flex-start; }
    .page-head:has(.ico) .inline { flex: none; flex-wrap: nowrap; }
    /* Room under the last line, so the pill never sits on its buttons for good */
    .page:has(.legend-btn) { padding-bottom: 76px; }
}

/* The payment page */
.pay-name { margin: 0 0 14px; text-align: center; font-weight: 700; font-size: 1.15rem; color: var(--teal-deep); overflow-wrap: anywhere; }
.pay-line { margin: 0 0 14px; text-align: center; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.pay-strong { font-weight: 700; color: var(--teal-deep); }
.login-card .pay-line:last-of-type { margin-bottom: 22px; }

/* ══════════ THE STATUS GRAPH ══════════
   The History Report's three graphs over requests (app_status_graph.html).
   Colours are the palette's teal family: one per login in turn (sg-k0 …
   sg-k5), the grey piece for requests nobody has closed yet (sg-open), and
   last year's bars faint behind this year's (sg-prev). The ring's pieces use
   the same classes, through fill. */
.sg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; align-items: start; }
.sg-months, .sg-weekdays, .sg-rings, .sg-ring { min-width: 0; }
@media (min-width: 1025px) {
    .sg-grid { grid-template-columns: minmax(0, 1fr) 460px; }
    .sg-weekdays { grid-column: 1; grid-row: 1; }
    .sg-months { grid-column: 1; grid-row: 2; }
    /* Each bar box sits beside a ring and takes the taller one's height:
       the month ring beside row 1, the year's ring beside row 2. With no
       month ring (a past year) the year's ring sits alone at the top. */
    .sg-grid { align-items: stretch; }
    .sg-rings { display: contents; }
    .sg-ring { grid-column: 2; grid-row: 2; }
    .sg-ring-month { grid-row: 1; }
    .sg-ring:only-child { grid-row: 1 / span 2; align-self: start; }
    .sg-months, .sg-weekdays, .sg-ring { display: flex; flex-direction: column; }
    .sg-months > .card-body, .sg-weekdays > .card-body { flex: 1; display: flex; flex-direction: column; }
    .sg-months .sg-rows, .sg-weekdays .sg-rows { flex: 1; justify-content: space-between; }
    .sg-ring > .card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}

.sg-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: 12px; color: var(--ink); }
.sg-stat strong { color: var(--teal-deep); font-variant-numeric: tabular-nums; }
.sg-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.sg-key-item { display: inline-flex; align-items: center; white-space: nowrap; }
.sg-swatch, .sg-seg { background-image: var(--gloss); }
.sg-swatch { display: inline-block; flex: none; width: 16px; height: 16px; margin-right: 6px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.sg-k0 { background-color: var(--teal); fill: var(--teal); }
.sg-k1 { background-color: var(--mint); fill: var(--mint); }
.sg-k2 { background-color: var(--head); fill: var(--head); }
.sg-k3 { background-color: var(--teal-deep); fill: var(--teal-deep); }
.sg-k4 { background-color: var(--green); fill: var(--green); }
.sg-k5 { background-color: var(--teal-dark); fill: var(--teal-dark); }
.sg-open { background-color: var(--ink-faint); fill: var(--ink-faint); }
.sg-prev { background-color: var(--ink-faint); opacity: 0.28; }

.sg-head, .sg-row { display: flex; align-items: center; gap: 10px; }
.sg-head { margin-bottom: 4px; font-size: 0.75rem; font-weight: 600; color: var(--ink-faint); }
.sg-rows { display: flex; flex-direction: column; gap: 7px; }
.sg-month { flex: 0 0 2.8rem; font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.sg-grow { flex: 1; min-width: 0; }
.sg-pct { flex: 0 0 2.8rem; text-align: right; font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sg-count { flex: 0 0 5.5rem; text-align: right; font-weight: 700; font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.sg-head .sg-pct, .sg-head .sg-count { font-size: 0.75rem; color: var(--ink-faint); font-weight: 600; }

/* A bar: a sunken track, and on it a raised bar of pieces, one per login. */
.sg-track {
    flex: 1; min-width: 0; height: 18px; border-radius: 999px; position: relative;
    background: var(--ground);
    box-shadow: inset 0 2px 3px rgba(15, 30, 60, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.8);
}
.sg-weekdays .sg-track { height: 26px; }
.sg-bar { position: relative; height: 100%; border-radius: 999px; display: flex; gap: 1px; overflow: hidden; box-shadow: var(--gloss-shadow); }
.sg-seg { flex-basis: 0; min-width: 2px; }
.sg-prev-bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background-color: var(--ink-faint); opacity: 0.28; }

.sg-ring svg { display: block; width: 100%; height: auto; }
.sg-donut-seg { stroke: none; }
.sg-donut-shade { stroke: none; pointer-events: none; }
.sg-slab { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.28)) drop-shadow(0 6px 6px rgba(8, 22, 48, 0.30)); }
.sg-bracket { fill: none; stroke: var(--ink-faint); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.sg-ring text { dominant-baseline: central; pointer-events: none; fill: var(--ink-soft); font-weight: 300; font-size: 10px; }
.sg-ring text.sg-donut-name { fill: var(--ink); font-weight: 500; font-size: 10.5px; }
.sg-ring text.sg-donut-total { fill: var(--teal-deep); font-weight: 600; font-size: 24px; }
.sg-ring text.sg-donut-label { fill: var(--ink-faint); font-weight: 400; font-size: 10px; }

/* ══════════ SELF-REGISTRATION ══════════
   The public registration page (register.html) is the product's cards and
   fields on the sign-in page's ground, as wide as SMS Reminder's own
   registration column. The sign-in page's way there is SMS Reminder's
   register box (its login_bz.html) in teal. */
.reg-wrap { width: 100%; max-width: 900px; margin: 0 auto; }
.reg-wrap .field select { width: 100%; }
.reg-hint { margin: 6px 0 0; font-size: 0.82rem; }
.reg-go { display: flex; justify-content: flex-end; }
.reg-errors { margin: 0 0 18px; padding-left: 20px; }
.reg-errors li { margin-bottom: 4px; overflow-wrap: anywhere; }
/* The documents step (register_documents.html): the rules as a list, and
   each paper's "accepted" and "not accepted" lines with their mark. */
.reg-list { margin: 0; padding-left: 20px; color: var(--ink-soft); line-height: 1.65; }
.reg-list li { margin-bottom: 4px; }
.reg-rule { display: flex; gap: 8px; margin: 10px 0 0; color: var(--ink-soft); line-height: 1.55; }
.reg-rule i { flex: none; margin-top: 2px; }
.reg-yes { color: #198754; }
.reg-no { color: #dc2626; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 26px 0 16px; color: var(--ink-faint); font-size: 0.8rem; white-space: nowrap; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: #c9d6d4; }
.login-new { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: var(--card-shadow); }
.login-new h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 1rem; color: var(--teal-deep); }
.login-new h2 i { color: var(--teal); }
.login-new p { margin: 0 0 14px; font-size: 0.86rem; line-height: 1.65; color: var(--ink-soft); }
/* The package step (register_package.html): SMS Reminder's plan buttons
   (core/register.html .type-btn) in teal, a radio inside each. */
.reg-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.reg-plan { position: relative; display: block; border: 2px solid var(--line); border-radius: 12px; padding: 20px 16px; background: #fff; text-align: center; cursor: pointer; transition: all 0.2s; box-shadow: var(--card-shadow); }
.reg-plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reg-plan:hover { border-color: var(--teal); background: var(--teal-tint); }
.reg-plan:has(input:checked) { border-color: var(--teal); background: var(--teal-tint); box-shadow: 0 0 0 3px rgba(27,121,135,0.12); }
.reg-plan:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(27,121,135,0.3); }
.reg-plan i { display: block; margin-bottom: 8px; font-size: 1.8rem; color: var(--ink-faint); }
.reg-plan:has(input:checked) i { color: var(--teal); }
.reg-plan-label { display: block; margin-bottom: 6px; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.reg-plan-price { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--teal-deep); }
.reg-plan-sub { font-size: 0.8rem; color: var(--ink-faint); }
/* The summary (register_summary.html): SMS Reminder's plan summary
   (core/register.html .plan-summary) on the product's dark ground. */
.reg-summary { background: var(--grad-dark); border-radius: 14px; padding: 24px 28px; margin-bottom: 20px; color: #fff; box-shadow: var(--card-shadow); }
.reg-summary-title { margin-bottom: 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); }
.reg-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 0.88rem; color: rgba(255,255,255,0.75); }
.reg-summary-row strong { font-size: 0.95rem; color: #fff; text-align: right; }
.reg-summary hr { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin: 12px 0; }
.reg-summary-total strong { font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 1.5rem; }
.reg-summary-note { margin: 10px 0 0; font-size: 0.76rem; color: rgba(255,255,255,0.6); }
/* The registration tips (register_tips.js): SMS Reminder's registration
   tips on the summary's dark ground, mint where SMS Reminder has amber.
   Beside the entry, its arrow on it; where there is no room (phones,
   tablets, a narrow window) a panel across the bottom. Under the windows. */
.reg-tip { position: absolute; z-index: 90; width: 340px; background: var(--grad-dark); color: rgba(255,255,255,0.88); border-radius: 12px; box-shadow: 0 12px 32px rgba(14,61,68,0.32); padding: 18px 20px 14px; font-size: 0.86rem; line-height: 1.6; }
.reg-tip::before { content: ''; position: absolute; left: -9px; top: var(--tip-arrow-top, 26px); border-style: solid; border-width: 9px 9px 9px 0; border-color: transparent #0f434b transparent transparent; }
.reg-tip.on-left::before { left: auto; right: -9px; border-width: 9px 0 9px 9px; border-color: transparent transparent transparent #1f6557; }
.reg-tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.reg-tip-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); }
.reg-tip-body p { margin: 0 0 8px; }
.reg-tip-body ul { margin: 0 0 8px; padding-left: 18px; }
.reg-tip-body li { margin-bottom: 3px; }
.reg-tip-body strong { color: #fff; font-weight: 600; }
.reg-tip-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.15); margin-top: 10px; padding-top: 10px; }
.reg-tip-foot button, .reg-tip-hide { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem; cursor: pointer; }
.reg-tip-hide { white-space: nowrap; color: rgba(255,255,255,0.6); }
.reg-tip-hide:hover { color: #fff; }
.reg-tip-step { color: var(--mint); font-weight: 600; }
.reg-tip-step:hover { color: #fff; }
#regTipNext { margin-left: auto; }
.reg-tip.is-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 40vh; overflow-y: auto; border-radius: 14px 14px 0 0; padding: 14px 18px calc(10px + env(safe-area-inset-bottom, 0px)); }
.reg-tip.is-panel::before { display: none; }
.reg-tip-ring { position: absolute; z-index: 89; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 3px rgba(52,224,200,0.7), 0 0 14px rgba(52,224,200,0.35); }
@media (max-width: 1024px) {
    .reg-go .btn { width: 100%; min-height: 46px; }
    .reg-plans { grid-template-columns: 1fr; }
    .reg-summary { padding: 20px; }
}