/* DDS's Day only. CI source: https://www.dodlesem.co.kr/about/ci/
   Shared aliases keep Planner, Space and their settings on the same palette.
   No layout, storage, permissions or user-assigned role colors are changed. */
html:root.brand-biz {
  --dds-deep: #14392B;
  --dds-light: #7AC143;
  --dds-beige: #F2EEE4;
  --dds-white: #FFFFFF;
  --dds-soft: #F7F5EF;
  --dds-highlight: #E6EFDF;
  --paper: var(--dds-white);
  --paper2: var(--dds-soft);
  --paper3: var(--dds-beige);
  --card: var(--dds-white);
  --ink: #1B2C24;
  --ink2: #4A5851;
  --ink3: #6E7A70;
  --rule: rgba(20, 57, 43, .16);
  --accent: var(--dds-deep);
  --accent2: var(--dds-highlight);
  --on-accent: var(--dds-white);
  --top: var(--dds-beige);
  --rail: var(--dds-beige);
  --sidebar: var(--dds-soft);
  --surface: var(--paper);
  --raised: var(--card);
  --hover: var(--paper3);
  --text: var(--ink);
  --muted: var(--ink2);
  --border: var(--rule);
  --line: var(--rule);
  --control-border: var(--ink3);
  --selected: var(--accent2);
  --link: var(--accent);
  --focus-ring: rgba(20, 57, 43, .18);
  --scrim: rgba(15, 44, 33, .34);
  --shadow: rgba(20, 57, 43, .15);
  --scroll-thumb: #8A968B;
  --dds-heading: var(--dds-deep);
  /* Space reference: 1.65 SVG units × 20/24 = 1.375 screen pixels. */
  --dds-nav-line: 1.375;
  color-scheme: light;
}
/* Derived dark surfaces, not additional official CI colors. Existing theme
   selection and Planner/Space inheritance stay with their current controllers. */
html:root.brand-biz:is(.dark, [data-theme="dark"]) {
  --paper: #0F2119;
  --paper2: #143025;
  --paper3: #213E30;
  --card: #19362A;
  --ink: #F2F5ED;
  --ink2: #C2CDC0;
  --ink3: #A0B29F;
  --rule: rgba(194, 205, 192, .22);
  --accent: #8FC96A;
  --accent2: #294934;
  --on-accent: #0F2C21;
  --top: var(--dds-deep);
  --rail: var(--dds-deep);
  --sidebar: var(--paper2);
  --surface: var(--paper);
  --raised: var(--card);
  --hover: var(--paper3);
  --text: var(--ink);
  --muted: var(--ink2);
  --border: var(--rule);
  --control-border: var(--ink3);
  --selected: var(--accent2);
  --link: var(--accent);
  --focus-ring: rgba(143, 201, 106, .25);
  --scrim: rgba(5, 16, 11, .7);
  --shadow: rgba(5, 16, 11, .4);
  --scroll-thumb: #657E68;
  --dds-heading: var(--ink);
  color-scheme: dark;
}
html.brand-biz body { background: var(--paper); }
html.brand-biz :is(.pagehead h1, .mo-head h1, .colhead, .role-head, .gsec h3) {
  color: var(--dds-heading);
}
html.brand-biz .thead {
  background: var(--paper3);
  color: var(--ink2);
}
html.brand-biz .thead span:hover { background: var(--accent2); }
html.brand-biz .sidebar .nav button:is(.active,[aria-expanded=true]) { color: var(--accent); font-weight:650; }
html.brand-biz .sidebar .nav button .ic { width:36px;height:36px;min-height:36px;border-radius:9px; }
html.brand-biz .sidebar .nav button:hover .ic { background:var(--accent2); }
html.brand-biz .sidebar .nav button:is(.active,[aria-expanded=true]) .ic { background:var(--accent);color:var(--on-accent); }
html.brand-biz .sidebar .nav button.active .calico { color:var(--on-accent); }
html.brand-biz .sidebar .nav button[data-page="goals"] .ic .gstar { width:28px;height:28px;overflow:visible; }
html.brand-biz .sidebar .gstar :is(.gx-a,.gx-b) { scale:1.2;transform-origin:12px 12px; }
html.brand-biz .sidebar .nav button[data-page="goals"].active .gstar :is(.gx-a,.gx-b,.gn) { animation-duration:3s; }
html.brand-biz .sidebar .nav button[data-page="goals"].active .gstar .gn {
  --day-north-color:#FF9A80;
  fill:var(--day-north-color);
  animation:gbr 3s ease-in-out infinite,day-north-flash 3s linear infinite;
}
html.brand-biz .sidebar .gstar .gn[opacity] { --day-north-opacity:.55; }
html.brand-biz:is(.dark,[data-theme="dark"]) .sidebar .nav button[data-page="goals"].active .gstar .gn { --day-north-color:#8F2518; }
/* Inner spokes align with north at the existing 74% keyframe (2.22s). */
@keyframes day-north-flash {
  0%,69%,79%,100% { fill:var(--day-north-color);opacity:var(--day-north-opacity,1); }
  71%,77% { fill:#FFFFFF;opacity:1; }
}
html.brand-biz .day-nav-pictogram{position:relative;display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center}
html.brand-biz .sidebar .nav button .ic .day-nav-svg{width:24px;height:24px;stroke-width:var(--dds-nav-line)}
html.brand-biz .day-nav-number{position:absolute;top:12px;left:0;width:24px;text-align:center;font:700 10px/10px -apple-system,"Helvetica Neue",sans-serif;font-variant-numeric:tabular-nums;color:inherit}
html.brand-biz :is(.btn, .pickbtn, .app .primary, .app .secondary) {
  border-radius: 9px;
}
html.brand-biz :is(.btn.primary, button.primary, .btn.solid) {
  color: var(--on-accent);
}
html.brand-biz.dark :is(.modal .f input, .modal .f select, .pickbtn,
  .role-row input[type="text"]:focus, .srow input[type="text"], .ctxmenu) {
  background: var(--card);
  color: var(--ink);
  border-color: var(--rule);
}
/* Preserve the existing layout and hit areas; use one weight for symbol icons. */
html.brand-biz :is(.ui-icon, .icon) { stroke-width: 1.65; }
html.brand-biz .wheel::before {
  background: linear-gradient(var(--paper), transparent);
}
html.brand-biz .wheel::after {
  background: linear-gradient(transparent, var(--paper));
}
html.brand-biz.dark :is(.toast, .drag-label, .note-badge) {
  background: var(--ink);
  color: var(--paper);
}
html.brand-biz .invite-card input { background: var(--paper); }
html.brand-biz .invite-card input[readonly],
html.brand-biz .invite-card .recipient { background: var(--paper2); }
html.brand-biz .brand-mark { color: var(--on-accent); }
html.brand-biz .invite-card :focus-visible {
  outline-color: var(--accent);
}
/* Some legacy controls use a fixed white foreground; dark green accents need
   the same readable foreground as primary buttons. */
html.brand-biz :is(.m-seg button.on, .ink-bar .ib.on, #note-ink.active,
  .step.done .chk, .ctxmenu .mrt .mrt-go, .dcol.today .dhead .dd,
  .tl-ev .src.lnk.done, .appt .src.lnk.done, .chip.ap .src.lnk.done,
  .hermes-settings button[type="submit"], .qa-fab) { color: var(--on-accent); }
html.brand-biz .ctxmenu .mi:active {
  background: var(--accent2);
  color: var(--ink);
}
html.brand-biz :is(.date-drop-over, .date-drop-blocked)::after {
  color: var(--on-accent);
}
html.brand-biz :is(.bar i, .progress i) {
  background: var(--dds-light);
}

/* Planner detail polish: same data/actions, clearer navigation and reading. */
html.brand-biz .sidebar .nav button .ic svg,
html.brand-biz .sidebar .notification-entry svg,
html.brand-biz .sidebar :is(.letters-btn,.donate-side,.status button) .ui-icon {
  width:24px;height:24px;
}
html.brand-biz .sidebar .calico{width:22px;height:22px}
html.brand-biz .sidebar .calico b{font-size:11px}
html.brand-biz .sidebar :is(.letters-btn,.donate-side,.status button){
  width:36px;height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;
  padding:0!important;font-size:24px!important;color:var(--ink2);border-radius:9px;
}
html.brand-biz .sidebar :is(.letters-btn,.donate-side,.status button):hover{background:var(--paper3);color:var(--ink)}
html.brand-biz .sidebar .status button.active{background:var(--accent2);color:var(--accent)}
html.brand-biz .sidebar .letters-btn .lcnt{top:1px;right:0}
html.brand-biz .sidebar .nav button:is(.active,[aria-expanded=true]){background:none;box-shadow:none}
html.brand-biz .sidebar .notification-entry svg{width:36px;height:36px;padding:6px;box-sizing:border-box;border-radius:9px}
html.brand-biz .sidebar .notification-entry:hover{background:none}
html.brand-biz .sidebar .notification-entry:hover svg{background:var(--accent2)}
html.brand-biz .sidebar .notification-entry[aria-expanded=true] svg{background:var(--accent);color:var(--on-accent)}
html.brand-biz .sidebar .status button.active{background:var(--accent);color:var(--on-accent)}
/* Compensate for viewBox scaling; preserve icon sizes and selection geometry. */
html.brand-biz .sidebar svg{stroke-width:var(--dds-nav-line);stroke-linecap:round;stroke-linejoin:round}
html.brand-biz .sidebar .addfav .ui-icon{stroke-width:var(--dds-nav-line)}
html.brand-biz .rail .icon{width:24px;height:24px;stroke-width:var(--dds-nav-line)}
html.brand-biz .sidebar #planner-spaces-button{margin-top:8px}
html.brand-biz .sidebar .addfav{width:34px;height:34px}
html.brand-biz .sidebar .addfav .ui-icon{width:24px;height:24px}
html.brand-biz .m-menu .letters-btn.in-menu{gap:10px}
html.brand-biz .m-menu :is(.letters-btn,.donate-side) .ui-icon{width:24px;height:24px}
html.brand-biz #page-goals .pagehead{padding-left:16px;padding-right:16px}
html.brand-biz #page-goals :is(.tree,.quad,.quad-note){padding-left:16px;padding-right:16px}
html.brand-biz #page-goals .goals-divider:is(:hover,:focus-visible)::after{height:4px;top:4px}
html.brand-biz #page-goals .mission-ta{background:var(--paper2);cursor:text}
html.brand-biz #page-goals .mission-ta:focus{outline:2px solid var(--accent);outline-offset:2px}
html.brand-biz #page-goals .gsec h3{color:var(--ink);font-weight:650}
html.brand-biz #page-goals .gsec .ed{display:inline-flex;align-items:center;min-height:34px;padding:4px 6px;border-radius:6px}
html.brand-biz #page-goals .gsec .ed:hover{background:var(--paper3)}
html.brand-biz #page-goals .vrow{border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;padding:6px 4px}
html.brand-biz #page-goals .vt{font-size:14px;line-height:1.5}
html.brand-biz #page-goals .vt small{font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
html.brand-biz #page-goals #goal-foldall[hidden]{display:none}
html.brand-biz #page-goals.day-no-goals .goal-pane{flex:0 0 auto;min-height:0}
html.brand-biz #page-goals.day-no-goals #goaltree{flex:none;overflow:visible}
html.brand-biz #page-goals.day-no-goals .goals-divider{display:none}
html.brand-biz #page-goals.day-no-goals .matrix-pane{flex:1 1 auto}
html.brand-biz .day-goal-empty{padding:12px 0 20px;line-height:1.6;font-size:14px;color:var(--ink2)}
html.brand-biz .day-goal-empty strong{display:block;font-size:16px;color:var(--ink)}
html.brand-biz .day-goal-empty p{margin:6px 0 12px}
html.brand-biz .day-goal-empty button{display:inline-flex;align-items:center;gap:6px}
html.brand-biz #matrix ul li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;min-height:40px;padding:8px 0}
html.brand-biz #matrix .matrix-task{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;width:auto;white-space:normal;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
html.brand-biz #matrix .matrix-states{max-width:94px;justify-content:flex-end;align-self:start;gap:4px}
html.brand-biz #matrix .matrix-state{font-size:11.5px;line-height:1.4;padding:2px 5px}
html.brand-biz #matrix .matrix-state::after{content:none}
html.brand-biz #matrix li.expanded .matrix-task{-webkit-line-clamp:unset;display:block}
html.brand-biz #matrix li.expanded{grid-template-columns:minmax(0,1fr)}
html.brand-biz #matrix li.expanded .matrix-states{justify-content:flex-start;max-width:none}
html.brand-biz .quad-note{font-size:12px;line-height:1.6;padding-top:12px}
html.brand-biz .quad-note details{margin-top:6px}
html.brand-biz .quad-note summary{cursor:pointer;min-height:30px;color:var(--accent)}
html.brand-biz .quad-note p{margin:6px 0}
html.brand-biz #rolemodal .role-row{grid-template-columns:32px 32px 32px minmax(0,1fr) 108px 32px;gap:6px}
html.brand-biz #rolemodal .role-row :is(button.mv,button.del){width:32px;height:36px}
html.brand-biz #rolemodal input[type=color]{width:32px!important;height:32px!important;padding:2px!important;border-radius:6px;background:var(--paper)}
html.brand-biz #role-new-name{background:var(--paper)!important;color:var(--ink)}
html.brand-biz #rolemodal input[aria-invalid=true]{outline:2px solid var(--danger)}
html.brand-biz #rolemodal .mact{flex-wrap:wrap;gap:8px}
html.brand-biz #role-save-status{font-size:12px;line-height:1.5;color:var(--ink2);flex:1 1 180px}
html.brand-biz #role-save-status[data-state=error]{color:var(--danger)}
html.brand-biz #role-save-retry[hidden]{display:none}
@media(max-width:560px){
  html.brand-biz #rolemodal .role-row{grid-template-columns:28px 28px 32px minmax(0,1fr) 34px 28px;gap:4px}
  html.brand-biz #rolemodal .role-row :is(button.mv,button.del){width:28px;height:36px}
}