/* Guard uses DOM's layout and component scale with its own green identity. */
body.guard-app {
  --paper: var(--app-background);
  --surface: #ffffff;
  --surface-strong: #f8faf7;
  --ink: #29302a;
  --muted: #69736a;
  --line: #e1e6de;
  --line-strong: #cdd6c8;
  --brand: #b6df46;
  --brand-strong: #a2ca35;
  --brand-rgb: 182, 223, 70;
  --teal: var(--brand);
  --teal-strong: var(--brand-strong);
  --radius: 12px;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.guard-workspace {
  --guard-accent: #b6df46;
  --guard-dark: #2b2b2b;
  --guard-line: #e1e6de;
  --guard-muted: #69736a;
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  align-items: start;
  min-width: 0;
  min-height: calc(100vh - 100px);
  color: #29302a;
}
.guard-page { display: grid; align-content: start; gap: 20px; padding: 26px 28px 36px; min-width: 0; }
.guard-workspace :is(h3,h4,h5) { color: #29302a; letter-spacing: -.015em; }
.guard-workspace h3 { font-size: 17px; font-weight: 700; }
.guard-workspace h4 { font-size: 14px; font-weight: 700; }
.guard-workspace .muted { color: var(--guard-muted); }
.guard-workspace .panel { padding: 20px; border: 1px solid var(--guard-line); border-radius: 12px; background: #fff; box-shadow: 0 2px 3px #29302a03,0 8px 24px #29302a03; min-width: 0; }
.guard-workspace button { min-height: 40px; padding: 9px 14px; border-radius: 9px; font-size: 12px; line-height: 1.4; font-weight: 600; }
.guard-workspace :is(input:not([type=checkbox]),select,textarea) { border-color: var(--guard-line); border-radius: 9px; font-size: 13px; background: #fff; }
.guard-workspace textarea { min-height: 100px; }
.guard-workspace label { font-size: 12px; line-height: 1.5; }
.guard-workspace :is(button,input,textarea,select) { touch-action: manipulation; }
.guard-workspace .btn-primary,.guard-app .btn-primary { background: #b6df46; border-color: #b6df46; color: #263014; box-shadow: 0 3px 8px #7b982018; }
.guard-workspace .btn-primary:hover,.guard-app .btn-primary:hover { background: #a2ca35; border-color: #a2ca35; }
.guard-app :where(button,a,input,select,textarea,summary):focus-visible,.guard-workspace :where(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid #789832; outline-offset: 3px; }
.guard-app :is(input,select,textarea):focus { border-color: #849a66; box-shadow: 0 0 0 3px #b6df4625; }
.guard-app input[type=checkbox] { accent-color: #789832; }
.guard-eyebrow { display: inline-block; font-size: 10px; font-weight: 750; letter-spacing: .13em; color: #657c35; }
.guard-navigation { position: sticky; top: 0; display: flex; flex-direction: column; gap: 20px; min-height: calc(100vh - 100px); padding: 28px 14px 20px; background: #2b2b2b; color: #d5ddce; }
.guard-navigation-title { padding: 0 12px; color: #98a38c; font-size: 10px; letter-spacing: .13em; font-weight: 650; }
.guard-tabs { display: grid; gap: 6px; }
.guard-tabs button { display: flex; align-items: center; gap: 12px; justify-content: start; width: 100%; min-height: 44px; border: 1px solid transparent; background: transparent; color: #c5cfbb; text-align: left; box-shadow: none; }
.guard-tabs .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .8; }
.guard-tabs button:hover { color: #fff; background: #ffffff0b; border-color: transparent; box-shadow: none; }
.guard-tabs button[aria-current=page] { background: #ffffff10; border-color: #ffffff10; color: #fff; box-shadow: inset 3px 0 #b6df46; }
.guard-tabs button[aria-current=page] .ui-icon { color: #b6df46; opacity: 1; }
.guard-tabs button[aria-current=page]:hover { background: #ffffff17; border-color: #ffffff10; color: #fff; box-shadow: inset 3px 0 #b6df46; }
.guard-navigation-note { margin-top: auto; padding: 18px 12px 0; border-top: 1px solid #ffffff12; font-size: 11px; line-height: 1.8; color: #98a38c; }
.guard-navigation-note strong { color: #c5cfbb; font-weight: 500; }
.guard-hero { min-width: 0; padding: 0; }
.guard-hero h2 { font-size: clamp(26px,2.4vw,34px); font-weight: 750; letter-spacing: -.035em; line-height: 1.2; margin: 7px 0; color: #29302a; }
.guard-hero p { margin: 0; color: var(--guard-muted); font-size: 13px; line-height: 1.5; }
.guard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--guard-line); flex-wrap: wrap; }
.guard-toolbar > button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 12px; background: #fff; }
.guard-toolbar .ui-icon { width: 16px; height: 16px; }
.guard-clock { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--guard-muted); }
.guard-clock strong { color: #46513a; font-variant-numeric: tabular-nums; }
.guard-agent-view { display: grid; gap: 18px; width: 100%; min-width: 0; }
.guard-agent-view > button { justify-self: start; }
.guard-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 0; }
.guard-section-head h3 { margin: 6px 0; font-size: 18px; }
.guard-section-head p { margin: 0; font-size: 12px; line-height: 1.6; }
.guard-section-head label { min-width: 155px; }
.guard-count { border: 1px solid #dde6cb; background: #eef4e2; color: #526730; padding: 6px 10px; border-radius: 7px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.guard-next-service { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.75fr); gap: 24px; border-top: 3px solid #b6df46 !important; align-items: center; }
.guard-next-summary { min-width: 0; }
.guard-next-summary h3 { font-size: 20px; margin: 8px 0; }
.guard-next-summary p { margin: 8px 0 14px; font-size: 13px; line-height: 1.8; }
.guard-next-summary > button { min-height: 34px; padding: 7px 12px; }
.guard-start-box { display: grid; gap: 10px; padding: 18px; margin: 0; border: 1px solid #e0e8d0; border-radius: 10px; background: #f6f9ef; min-width: 0; }
.guard-start-box p { margin: 0; color: #445a25; font-size: 13px; font-weight: 700; line-height: 1.5; }
.guard-start-box small { font-size: 11px; color: var(--guard-muted); line-height: 1.5; }
.guard-start-box button { justify-self: start; }
.guard-detail > .guard-start-box { margin: 18px 0; }
.guard-upcoming-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.guard-upcoming-list > .panel { grid-column: 1 / -1; }
.guard-upcoming-card { display: flex; align-items: center; text-align: left; gap: 14px; padding: 16px !important; width: 100%; border: 1px solid var(--guard-line); border-radius: 10px !important; background: #fff; color: #29302a; }
.guard-upcoming-card:hover { background: #fafcf7; }
.guard-upcoming-card.is-ready { border-color: #adca77; box-shadow: inset 3px 0 #b6df46; }
.guard-date-badge { display: grid; gap: 5px; text-align: center; padding: 10px; background: #f1f5e9; border-radius: 8px; min-width: 65px; }
.guard-date-badge strong { font-size: 24px; line-height: 1; font-weight: 750; }
.guard-date-badge small { font-size: 10px; font-weight: 500; color: #69765a; }
.guard-card-body { display: grid; gap: 6px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.guard-card-body > strong { font-size: 14px; }
.guard-card-body > span { font-size: 12px; color: var(--guard-muted); }
.guard-card-body b { font-size: 12px; font-weight: 650; }
.guard-card-body small { font-size: 11px; color: #627447; line-height: 1.5; font-weight: 500; }
.guard-active-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px !important; border: 1px solid #d8e6bd; border-radius: 10px !important; background: #f2f7e7; text-align: left; }
.guard-active-banner > span:last-child { margin-left: auto; font-size: 12px; color: #526b27; }
.guard-status { display: inline-block; width: fit-content; padding: 4px 8px; border-radius: 6px; font-size: 10px; line-height: 1.4; font-weight: 700; white-space: nowrap; }
td .guard-status { margin-left: 8px; }
.guard-running { color: #496223; background: #edf5d7; }
.guard-planned { color: #627158; background: #f0f4eb; }
.guard-ended { color: #687166; background: #eef1eb; }
.guard-expired { color: #936336; background: #fff2e6; }
.guard-special { color: #8a6a24; background: #fcf2d9; }
.guard-preserve { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; }
.guard-notice { margin: 0; padding: 12px 16px; border: 1px solid #dce9c5; background: #f2f7e8; border-radius: 9px; color: #526b2e; font-size: 12px; line-height: 1.6; }
.guard-error { border-color: #edcec4; color: #963f32; background: #fff4ef; }
.guard-notice.guard-expired { color: #936336; background: #fff4eb; border-color: #efdac6; }
.guard-detail .panel-head { align-items: flex-start; margin: -20px -20px 20px; padding: 18px 20px; border-bottom: 1px solid var(--guard-line); background: #fff; }
.guard-detail .panel-head h3 { margin: 0; font-size: 18px; }
.guard-detail .panel-head p { margin: 8px 0 0; font-size: 12px; line-height: 1.6; }
.guard-detail > h4 { margin: 24px 0 12px; }
.guard-service-times { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 14px 16px; background: #f6f8f3; border: 1px solid var(--guard-line); border-radius: 9px; margin: 18px 0; }
.guard-service-times span { display: grid; gap: 6px; font-size: 11px; color: var(--guard-muted); }
.guard-service-times strong { font-size: 13px; color: #46513a; font-weight: 650; }
.guard-tasks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.guard-tasks > li { display: grid; gap: 14px; align-content: start; padding: 16px; border: 1px solid var(--guard-line); border-radius: 10px; min-width: 0; }
.guard-tasks small { display: block; margin-top: 6px; color: var(--guard-muted); font-size: 11px; line-height: 1.5; }
.guard-tasks p { margin: 8px 0 0; }
.guard-tasks .is-done { background: #f7faef; border-color: #deebc5; }
.guard-tasks .is-skipped { background: #fffaf4; border-color: #eddbca; }
.guard-task-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.guard-task-heading > div { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.guard-task-heading .guard-status { flex-shrink: 0; }
.guard-task-result { display: grid; gap: 6px; margin: 0 !important; }
.guard-task-actions,.guard-task-skip-form .row-actions { flex-wrap: wrap; }
.guard-task-actions button { flex: 1; min-width: 110px; font-size: 11px; }
.guard-task-skip-form { display: grid; gap: 12px; }
.guard-task-links { border-top: 1px solid var(--guard-line); min-width: 0; }
.guard-task-links summary { cursor: pointer; padding: 12px 0; font-size: 12px; line-height: 1.5; color: #617c32; font-weight: 600; }
.guard-task-linked h5 { font-size: 12px; margin: 12px 0; }
.guard-task-entries,.guard-journal-items { list-style: none; display: grid; gap: 10px; padding: 0; margin: 0; }
.guard-task-entries li,.guard-journal li { border: 1px solid #e4eada; border-left: 3px solid #a4c74b; border-radius: 7px; background: #f8faf4; padding: 12px 14px; }
.guard-task-entries strong,.guard-journal li > strong { font-size: 12px; }
.guard-task-entries small,.guard-journal small { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--guard-muted); }
.guard-task-entries p,.guard-journal p { margin: 8px 0 0; }
:is(.guard-task-entries,.guard-journal) .guard-event-note { border-color: #dfe7ec; border-left-color: #82a2b3; background: #f7fafc; }
:is(.guard-task-entries,.guard-journal) .guard-event-event { border-color: #ede5d2; border-left-color: #c7a23b; background: #fdfaf3; }
:is(.guard-task-entries,.guard-journal) .guard-event-incident { border-color: #efdfd9; border-left-color: #cb4c36; background: #fdf7f4; }
.guard-journal { display: grid; gap: 18px; list-style: none; padding: 0; margin: 18px 0; min-width: 0; }
.guard-journal-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
.guard-journal-groups > section { min-width: 0; }
.guard-journal-groups > section:last-child { grid-column: 1 / -1; }
.guard-journal-groups h4 { margin: 0 0 12px; font-size: 13px; }
.guard-main-courante { padding-top: 18px; border-top: 1px solid var(--guard-line); }
.guard-main-courante h4 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.guard-main-courante .guard-entry-count { margin-left: auto; }
.guard-main-courante .guard-export-pdf { min-height: 38px; font-size: 11px; }
.guard-timeline-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.guard-timeline-time-column { width: 120px; }
.guard-timeline-table :is(th,td) { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--guard-line); }
.guard-timeline-table th { background: #f4f6f1; color: var(--guard-muted); font-size: 11px; }
.guard-timeline-table .guard-timeline-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.guard-timeline-table .guard-timeline-time small { margin-top: 4px; font-size: 10px; }
.guard-timeline-info { overflow-wrap: anywhere; }
.guard-timeline-table .guard-timeline-info p { line-height: 1.6; }
@media (max-width: 820px) {
  .guard-timeline-time-column { width: 94px; }
  .guard-timeline-table :is(th,td) { padding: 10px 8px; }
}
.guard-entry-count { padding: 4px 8px; border-radius: 6px; color: #617c32; background: #f1f6e6; font-size: 10px; font-weight: 600; }
.guard-site-history .guard-section-head { padding-bottom: 18px; border-bottom: 1px solid var(--guard-line); margin-bottom: 16px; }
.guard-site-history .guard-section-head h3 { font-size: 16px; }
.guard-site-history,.guard-site-journal { min-width: 0; overflow-wrap: anywhere; }
.guard-site-journals { display: grid; gap: 12px; }
.guard-site-journal { border: 1px solid var(--guard-line); border-radius: 9px; padding: 0 16px; }
.guard-site-journal summary { display: grid; gap: 5px; padding: 14px 22px 14px 0; cursor: pointer; position: relative; }
.guard-site-journal summary::after { content: '+'; position: absolute; top: 14px; right: 0; color: #6d833e; font-size: 20px; line-height: 1; }
.guard-site-journal[open] summary::after { content: '−'; }
.guard-site-journal summary strong { font-size: 13px; }
.guard-site-journal summary span,.guard-site-journal summary small { color: var(--guard-muted); font-size: 11px; line-height: 1.6; }
.guard-site-journal[open] summary { border-bottom: 1px solid var(--guard-line); }
.guard-site-journal .guard-journal { margin: 16px 0; }
:is(.guard-service-forms,.guard-task-forms) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.guard-task-forms { grid-template-columns: minmax(0,1fr); margin: 0; }
:is(.guard-service-forms,.guard-task-forms) form { min-width: 0; display: grid; align-content: start; gap: 12px; padding: 16px; border: 1px solid var(--guard-line); border-top: 3px solid #82a2b3; border-radius: 10px; margin: 0; background: #fff; }
:is(.guard-service-forms,.guard-task-forms) .guard-event-form { border-top-color: #c7a23b; }
:is(.guard-service-forms,.guard-task-forms) :is(h4,p) { margin: 0; }
:is(.guard-service-forms,.guard-task-forms) p { font-size: 12px; line-height: 1.6; }
:is(.guard-service-forms,.guard-task-forms) button { justify-self: start; }
.guard-config-form,.guard-end-form { display: grid; gap: 14px; }
.guard-end-form { border-top: 1px solid var(--guard-line); margin-top: 24px; padding-top: 20px; }
.guard-end-form h4 { margin: 0; }
.guard-end-form p { margin: 0; font-size: 12px; line-height: 1.6; }
.guard-end-form button { justify-self: start; }
.guard-service-actions { margin: 24px 0; }
.guard-service-actions button { min-height: 44px; }
.guard-entry-dialog { width: min(540px,calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 24px 72px #17203029; overflow-y: auto; }
.guard-entry-dialog::backdrop { background: #14203385; backdrop-filter: blur(4px); }
.guard-entry-dialog .guard-service-forms { display: block; margin: 0; }
.guard-entry-dialog .guard-service-forms form { padding: 0; border: 0; gap: 16px; }
.guard-entry-dialog h4 { padding-right: 32px; font-size: 18px; }
.guard-entry-dialog label { display: grid; gap: 8px; font-size: 13px; }
.guard-entry-dialog textarea { min-height: 160px; resize: vertical; }
.guard-entry-dialog :is(button,input,select,textarea) { font-size: 14px; }
.guard-entry-dialog button { min-height: 44px; }
.guard-entry-dialog .guard-entry-close { position: absolute; top: 16px; right: 16px; width: 36px; min-height: 36px; padding: 0; font-size: 24px; }
.guard-entry-cancel { margin-top: 12px; }
@media (max-width: 820px) {
  .guard-service-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .guard-service-actions button { white-space: normal; }
  .guard-entry-dialog { padding: 24px 18px; }
  .guard-entry-dialog :is(input,select,textarea) { font-size: 16px; }
}
.guard-config-tasks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.guard-config-tasks fieldset { border: 1px solid var(--guard-line); border-radius: 10px; padding: 16px; display: grid; gap: 12px; min-width: 0; background: #fafcf8; }
.guard-config-tasks legend { font-size: 12px; font-weight: 700; padding: 0 8px; }
label.guard-checkbox { display: flex; flex-direction: row; gap: 10px; align-items: center; padding: 8px 0; }
.guard-checkbox input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: #789832; }
.guard-management-tabs { flex-wrap: wrap; gap: 0; margin-top: 20px; border-bottom: 1px solid var(--guard-line); }
.guard-management-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; border-radius: 0; color: var(--guard-muted); box-shadow: none; padding: 12px 16px; }
.guard-management-tabs button[aria-current=page] { color: #617c32; border-bottom-color: #93b43e; background: #f7faef; box-shadow: none; }
.guard-management-tabs button[aria-current=page]:hover { background: #f0f5e4; border-color: transparent transparent #93b43e; color: #617c32; box-shadow: none; }
.guard-settings > h3 { margin: 0 0 8px; }
.guard-settings > p { margin: 0; font-size: 12px; }
.guard-calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; }
.guard-calendar-nav strong { text-transform: capitalize; font-size: 14px; }
.guard-calendar-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.guard-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 0; border: 1px solid var(--guard-line); border-radius: 9px; overflow: hidden; }
.guard-weekday { text-align: center; font-size: 10px; color: var(--guard-muted); font-weight: 700; padding: 12px 6px; background: #f4f7f0; border-bottom: 1px solid var(--guard-line); }
.guard-calendar-day,.guard-calendar-blank { min-height: 120px; padding: 8px; background: #fff; border-right: 1px solid var(--guard-line); border-bottom: 1px solid var(--guard-line); min-width: 0; }
.guard-calendar-blank { background: #fafcf8; }
.guard-calendar-day h4 { font-size: 11px; color: var(--guard-muted); margin: 2px 0 10px; }
.guard-calendar-day.is-today { background: #f8fbed; box-shadow: inset 0 3px #b6df46; }
.guard-calendar-day.is-today h4 { color: #617c32; }
.guard-calendar-entry { display: grid; gap: 5px; width: 100%; text-align: left; border: 1px solid #e1e8d6; border-left: 3px solid #a5bb77; border-radius: 7px !important; padding: 8px !important; margin-top: 8px; background: #f9fbf5; color: #29302a; overflow-wrap: anywhere; }
.guard-calendar-entry strong { font-size: 11px; }
.guard-calendar-entry > span,.guard-calendar-entry small { font-size: 10px; line-height: 1.5; font-weight: 500; }
.guard-calendar-entry.is-special { border-left-color: #c8a33d; background: #fdfaf1; }
.guard-calendar-entry.is-selected { outline: 2px solid #93ad4f; outline-offset: 1px; }
[data-guard-occurrence-editor] { display: grid; gap: 18px; scroll-margin-top: 20px; }
.guard-calendar-panel details { line-height: 1.6; }
.guard-workspace summary { cursor: pointer; }
.guard-app-shell { background: var(--paper); }
.guard-app-shell .guard-sidebar {
  --brand: #bdbdbd;
  --brand-strong: #d0d0d0;
  --brand-rgb: 189, 189, 189;
  background: var(--sidebar-background);
  color: #f0f0f0;
}
.guard-brand { color: inherit; text-decoration: none; }
.guard-brand strong { font-size: 17px; }
.guard-brand small { color: #c0c0c0; }
.guard-sidebar .sidebar-head { gap: 8px; }
.guard-sidebar .sidebar-toggle { color: #f0f0f0; border-color: #666666; background: #444444; }
.guard-sidebar .nav-section-title { color: #c0c0c0; }
.guard-sidebar .guard-tabs { align-content: start; }
.guard-sidebar .guard-tabs button { font-size: 12px; color: #d0d0d0; }
.guard-sidebar .guard-tabs button:hover { color: #ffffff; background: #444444; }
.guard-sidebar .guard-tabs button.active,
.guard-sidebar .guard-tabs button.active:hover { background: #4c4c4c; border-color: #666666; box-shadow: inset 3px 0 #bdbdbd; color: #ffffff; }
.guard-sidebar .guard-tabs button.active .ui-icon { color: #eeeeee; }
.guard-sidebar .sidebar-bottom { display: grid; gap: 12px; border-color: #555555; }
.guard-sidebar .guard-back-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #d0d0d0; font-size: 12px; }
.guard-sidebar .guard-back-link:hover { color: #ffffff; }
.guard-app .sidebar-install-button { display: inline-flex; align-items: center; justify-content: center; }
.guard-sidebar .sidebar-install-button { color: #f0f0f0; border-color: #666666; background: #444444; }
.guard-sidebar .sidebar-install-button:hover { background: #4c4c4c; }
.guard-app-shell .guard-app-header { min-width: 0; padding: 0; background: transparent; color: var(--ink); }
.guard-app-header .topbar-guard-logo { width: auto; height: 120px; max-width: 260px; object-fit: contain; object-position: left center; }
.guard-app-header .topbar-kicker { color: #657c35; }
.guard-app-header .header-logout { color: #566e2e; background: #f4f8ec; border-color: #dbe5cb; }
.guard-workspace.guard-in-shell { grid-template-columns: minmax(0,1fr); min-height: 0; }
.guard-in-shell .guard-page { padding: 0; }
.guard-session-loading { min-height: 100vh; display: grid; place-items: center; color: #657c35; }
.guard-back-link { color: #617c32; font-size: 12px; font-weight: 650; text-decoration: none; }
.guard-back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.guard-app-main { min-width: 0; }
.guard-app-footer { color: #7b8673; font-size: 10px; padding-top: 8px; }
.guard-auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 24px; background: var(--paper); }
.guard-auth-panel { display: grid; grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); width: min(1040px,100%); border: 1px solid #e1e6de; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 80px #29302a14; }
.guard-auth-intro { min-width: 0; min-height: 540px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; color: #fff; background: #252923; }
.guard-auth-logo { width: 300px; max-width: 100%; margin-bottom: 22px; }
.guard-auth-intro .guard-eyebrow { color: #b6df46; }
.guard-auth-intro h1 { font-size: 27px; font-weight: 750; letter-spacing: -.025em; line-height: 1.3; margin: 14px 0; max-width: 320px; }
.guard-auth-intro p { max-width: 320px; margin: 0; color: #bdc8b0; font-size: 13px; line-height: 1.7; }
.guard-auth-card { min-width: 0; padding: 42px; background: #fff; align-content: center; }
.guard-auth-card .guard-eyebrow { color: #657c35; }
.guard-auth-card h2 { font-size: 26px; letter-spacing: -.035em; margin: 14px 0 10px; }
.guard-auth-card > .muted { font-size: 13px; margin-bottom: 26px; line-height: 1.6; }
.guard-auth-card > .guard-back-link { display: inline-block; margin-top: 24px; }
.guard-auth-card .link-button { color: #617c32; }
.guard-auth-card .sidebar-install-button { margin-top: 20px; color: #29302a; border-color: #cdd6c8; background: #f4f6f3; }
.guard-auth-card .auth-error { background: #fff4ef; color: #963f32; border-color: #edcec4; }
/* The DOM launch link keeps DOM's own navigation and color palette. */
.nav a.dom-guard-launch { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #e4f6bd; border: 1px solid #74885244; border-radius: 8px; text-decoration: none; background: #99bc4310; font-size: .78rem; font-weight: 750; min-height: 42px; }
.nav a.dom-guard-launch:hover { background: #99bc4326; border-color: #8daa54; }
.guard-launch-arrow { margin-left: auto; font-size: 16px; }
.sidebar-collapsed .nav a.dom-guard-launch { justify-content: center; padding: 12px 0; }
.sidebar-collapsed .guard-launch-arrow { display: none; }

@media screen and (min-width: 821px) {
  .guard-app-shell.sidebar-collapsed .sidebar-bottom { display: none; }
  .guard-app-shell.sidebar-collapsed .guard-tabs { min-width: 0; grid-template-columns: minmax(0,1fr); gap: 5px; }
}
@media (min-width: 1600px) { .guard-page { max-width: 1400px; width: 100%; margin: 0 auto; } }
@media (max-width: 1100px) {
  .guard-workspace { grid-template-columns: 196px minmax(0,1fr); }
  .guard-page { padding: 24px 20px; }
  .guard-tasks { grid-template-columns: minmax(0,1fr); }
  .guard-calendar-grid { grid-template-columns: minmax(0,1fr); gap: 12px; border: 0; overflow: visible; }
  .guard-calendar-blank,.guard-weekday,.guard-calendar-day:not(.has-vacations) { display: none; }
  .guard-calendar-day { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--guard-line); border-radius: 9px; padding: 12px; }
  .guard-calendar-day h4 { grid-column: 1 / -1; margin: 0; }
  .guard-calendar-entry { margin: 0; }
  .guard-next-service { grid-template-columns: minmax(0,1fr); gap: 16px; }
}
@media (max-width: 820px) {
  .guard-app-shell { background: var(--paper); }
  .guard-workspace { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .guard-navigation { position: static; min-height: 0; padding: 12px 16px; gap: 0; }
  .guard-navigation-title,.guard-navigation-note { display: none; }
  .guard-tabs, .sidebar .sidebar-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .guard-tabs:has([data-tab=settings]) { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .guard-tabs button, .sidebar .sidebar-tabs > :is(button,a) { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 8px 4px; font-size: 11px; min-height: 58px; text-align: center; position: relative; }
  .guard-tabs button[aria-current=page] { box-shadow: inset 0 -2px #b6df46; }
  .guard-tabs button[aria-current=page]:hover { box-shadow: inset 0 -2px #b6df46; }
  .guard-tabs button span { white-space: nowrap; }
  .sidebar .nav, .sidebar .nav-section { display: block; overflow: visible; }
  .sidebar .nav-section + .nav-section { margin-top: 12px; }
  .sidebar .nav-section-title { display: none; }
  .sidebar .sidebar-tabs .nav-label { flex: initial; white-space: normal; }
  .sidebar .sidebar-tabs .nav-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; }
  .sidebar .sidebar-tabs .guard-launch-arrow { display: none; }
  .shell:not(.guard-app-shell) .sidebar-tabs button.active,
  .shell:not(.guard-app-shell) .sidebar-tabs button.active:hover { box-shadow: inset 0 -2px var(--brand); }
  .guard-page { padding: 20px 16px 24px; gap: 16px; }
  .guard-hero h2 { font-size: 26px; }
  .guard-app-header .topbar-guard-logo { height: 88px; max-width: min(140px,42vw); }
  .guard-app-header .topbar-spga { max-width: min(150px,42vw); }
  .guard-app-shell .guard-sidebar { gap: 12px; }
  .guard-sidebar .sidebar-head { min-width: 0; }
  .guard-sidebar .nav { display: block; overflow: visible; }
  .guard-sidebar .nav-section { display: block; }
  .guard-sidebar .guard-tabs button { display: flex; font-size: 11px; }
  .guard-sidebar .guard-tabs button.active,
  .guard-sidebar .guard-tabs button.active:hover { box-shadow: inset 0 -2px #bdbdbd; }
  .guard-sidebar .guard-tabs .nav-label { flex: initial; white-space: normal; }
  .guard-sidebar .sidebar-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .guard-sidebar .sidebar-bottom .guard-back-link { padding: 5px 0; }
  .guard-brand { gap: 10px; }
  .guard-brand strong { font-size: 16px; }
  .guard-brand small { font-size: 10px; }
  .guard-workspace .panel { padding: 16px; }
  .guard-detail .panel-head { margin: -16px -16px 16px; padding: 16px; }
  .guard-workspace :is(input:not([type=checkbox]),select,textarea) { font-size: 16px; min-height: 44px; }
  .guard-workspace button { min-height: 44px; }
  .guard-section-head { flex-wrap: wrap; align-items: start; gap: 12px; }
  .guard-section-head h3 { font-size: 17px; }
  .guard-upcoming-list,.guard-config-tasks { grid-template-columns: minmax(0,1fr); }
  .guard-calendar-day { grid-template-columns: minmax(0,1fr); }
  .guard-calendar-entry strong { font-size: 13px; }
  .guard-calendar-entry > span,.guard-calendar-entry small { font-size: 11px; }
  .guard-calendar-nav { flex-wrap: wrap; }
  .guard-calendar-nav strong { order: -1; flex-basis: 100%; text-align: center; }
  .guard-calendar-nav button { flex: 1; padding: 9px; }
  :is(.guard-service-forms,.guard-task-forms),.guard-journal-groups { grid-template-columns: minmax(0,1fr); }
  .guard-start-box button,:is(.guard-service-forms,.guard-task-forms) button,.guard-end-form button { width: 100%; }
  .guard-auth { padding: 24px 16px; }
  .guard-auth-panel { grid-template-columns: minmax(0,1fr); border-radius: 16px; max-width: 520px; }
  .guard-auth-intro { min-height: 0; padding: 24px; }
  .guard-auth-logo { width: 170px; margin-bottom: 12px; }
  .guard-auth-intro h1 { font-size: 22px; margin: 10px 0; }
  .guard-auth-intro p { font-size: 12px; }
  .guard-auth-card { padding: 26px; }
}
@media (max-width: 540px) {
  .guard-toolbar { align-items: start; }
  .guard-clock { max-width: 180px; gap: 5px; font-size: 11px; }
  .guard-toolbar > button { min-height: 36px; padding: 7px 10px; }
  .guard-service-times { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .guard-upcoming-card { padding: 14px !important; gap: 12px; }
  .guard-upcoming-card > span:last-child { display: none; }
  .guard-date-badge { min-width: 58px; padding: 10px 7px; }
  .guard-management-tabs button { padding: 10px; font-size: 11px; flex: 1; }
  .guard-task-forms form { padding: 12px; }
  .guard-task-actions button { min-width: 90px; }
  .guard-detail { padding-bottom: max(16px,env(safe-area-inset-bottom)) !important; }
}
