/* ODC Home's own styles, loaded after cs.css (config crewsuite.styles; CrewSuite §2.2, Design §0.3).
   Only what the kit has no piece for: the launch tiles (D4), the bell and its drawer (D5), the Usage bars (D6). Written
   to the proposals' class names so they can move into cs.css when the package takes them. */

/* Launch tiles (D1): the app's icon and name, one line. */
.cs-tile { padding: 12px 14px; border: 1px solid #d9e0e8; border-radius: 8px; background: #fff; color: #1f2d3a; }
.cs-tile:hover, .cs-tile:focus-visible { border-color: var(--cs-accent); background: #f4f8ff; }

/* The permission grid (Design §11.8, §10.3): one small table per category, flowing in masonry columns; a
   permission a role grants is ticked, greyed and locked. From demos/home/user.html. */
.pg-grid { columns: 3 12rem; column-gap: 12px; }
.pg-group { break-inside: avoid; margin-bottom: 12px; border: 1px solid #d9e0e8; border-radius: 6px; overflow: hidden; }
.pg-group .cs-table { table-layout: fixed; width: 100%; margin: 0; }
.pg-group col.c-tick { width: 30px; }
.pg-group td label { margin: 0; overflow-wrap: anywhere; cursor: pointer; }
.pg-group .form-check-input { margin: 0; }
.pg-group tr.is-role label { color: var(--cs-muted); cursor: default; }
.pg-group .form-check-input:disabled { opacity: 1; }
.pg-group .form-check-input:disabled:checked { background-color: #7b8794; border-color: #7b8794; }
.pg-group td .bi, .pg-group td .cs-badge { margin-left: 4px; }
.pg-roles { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--cs-border); }
.us-split { --cs-split-w: 300px; }
.us-state { width: 14px; flex: none; text-align: center; }
.us-id { flex: none; min-width: 2.4rem; text-align: right; font-variant-numeric: tabular-nums; }

/* The Home page's link groups (D4): groups flow in columns, each kept whole (Design §10.3 masonry). */
.hm-links { columns: 2 16rem; column-gap: 20px; }
.hm-link-group { break-inside: avoid; margin-bottom: 12px; }
.hm-link-group .cs-subhead { margin-bottom: 4px; }
.hm-link-group .cs-list > li { padding-top: 4px; padding-bottom: 4px; }

/* The icon picker (D4): icons with plain words, picked by looking. */
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 4px; max-height: 14rem; overflow-y: auto; padding: 4px; border: 1px solid var(--cs-form-border); border-radius: 6px; background: #fff; }
.ip-choice { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid transparent; border-radius: 6px; background: none; color: #1f2d3a; font-size: .7rem; line-height: 1.2; }
.ip-choice > .bi { font-size: 1.25rem; }
.ip-choice:hover, .ip-choice:focus-visible { background: #f4f8ff; border-color: #c9d6ea; }
.ip-choice.is-on { background: #e8f0fb; border-color: var(--cs-accent); font-weight: 600; }

/* Notifications (PLAN D5; docs/proposals/notifications.md in the standard, mockups demos/proposals/notifications.html and
   notification-center.html). Written to the proposal's class names (.cs-bell, .nt-*, .nc-*) so they can move into
   cs.css when the package takes the bell; until then they live here. */

/* The bell in the top bar: full bar height, darkens when pointed at or open. Its count is the sidebar's red count pill
   (#c62f2a, white text 5.3:1). */
.cs-bell-wrap { align-self: stretch; display: flex; }
.cs-bar-app:has(.cs-bell-wrap) { align-self: stretch; }
.cs-bell { flex-shrink: 0; align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; width: 44px; padding: 0; color: #d6dadf; background: transparent; border: 0; }
.cs-bell:hover, .cs-bell:focus-visible, .cs-bell[aria-expanded="true"] { color: #fff; background: #1c1f23; }
.cs-bell:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
.cs-bell > .bi { font-size: 1.1rem; line-height: 1; }
.cs-bell > .n { position: absolute; top: 8px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #c62f2a; color: #fff; font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #000; }
.cs-bell > .n.bump { animation: cs-bump .7s ease-out; }
@keyframes cs-bump { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cs-bell > .n.bump { animation: none; } }

/* The drawer's list: one notification per row, at most two lines, every fact in a fixed slot: the unread dot, the app's
   icon, the title and the time on line 1; who and the subject (the jump) on line 2; read and archive at the right. */
.nt-drawer { white-space: normal; }
.nt-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.nt-group { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--cs-muted); padding: 6px 12px 4px; background: #f3f5f7; border-bottom: 1px solid var(--cs-border); }
.nt-list { list-style: none; margin: 0; padding: 0; }
.nt-item { display: grid; grid-template-columns: 10px 18px minmax(0, 1fr) auto; grid-template-areas: "dot app title when" "dot app sub acts" "dot app body body"; column-gap: 8px; row-gap: 1px; align-items: center; padding: 6px 10px 6px 8px; border-bottom: 1px solid var(--cs-border); font-size: .8rem; line-height: 1.35; transition: background-color 3s ease; }
.nt-item:last-child { border-bottom: 0; }
.nt-item:hover { background: #f3f6fa; }
.nt-item.is-unread { background: #f4f8ff; }
.nt-item.is-unread:hover { background: #eaf1fd; }
.nt-item.is-new { background: #fff6dc; transition: none; } /* not yet seen: highlighted the first time the drawer shows it */
.nt-item > .dot { grid-area: dot; align-self: start; margin-top: 6px; width: 8px; height: 8px; border-radius: 50%; }
.nt-item.is-unread > .dot { background: var(--cs-accent); }
.nt-item > .app { grid-area: app; align-self: start; margin-top: 2px; text-align: center; }
.nt-item > .title { grid-area: title; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1f2d3a; }
.nt-item.is-unread > .title { font-weight: 600; }
.nt-item > .when { grid-area: when; color: var(--cs-muted); font-size: .72rem; white-space: nowrap; font-variant-numeric: tabular-nums; } /* 7.1:1 */
.nt-item > .sub { grid-area: sub; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; color: var(--cs-muted); font-size: .75rem; }
.nt-item > .sub a { color: #1d55b8; text-decoration: none; overflow: hidden; text-overflow: ellipsis; } /* the jump: 7.0:1 */
.nt-item > .sub a:hover, .nt-item > .sub a:focus-visible { text-decoration: underline; }
.nt-item > .sub a .bi { font-size: .68rem; margin-left: 3px; }
.nt-item > .sub .nt-nolink { overflow: hidden; text-overflow: ellipsis; }
.nt-item > .acts { grid-area: acts; display: flex; gap: 2px; }
.nt-item > .acts .btn { --bs-btn-padding-y: 0; --bs-btn-padding-x: .3rem; font-size: .75rem; line-height: 1.4; }
.nt-item > .acts .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.nt-item > .nt-body { grid-area: body; margin-top: 4px; font-size: .78rem; color: #1f2d3a; }
.nt-item > .nt-body > :last-child { margin-bottom: 0; }
.nt-prio { color: #a3261f; }
/* Pinned announcements: the first thing in the drawer until they end, a warm card with a pin in the app slot and
   "until Oct 31" in the time slot. They can be marked read; archive is greyed with its reason. */
.nt-pinned { margin-bottom: 10px; border: 1px solid #f1e0a6; border-radius: 6px; overflow: hidden; }
.nt-pinned .nt-group { background: #fff4d6; color: #7a5b00; border-bottom-color: #f1e0a6; } /* 6.1:1 */
.nt-item.is-pinned, .nt-item.is-pinned:hover { background: #fffbef; }
.nt-item.is-pinned > .app .bi-pin-angle-fill { color: #8a5d00; } /* 5.3:1 on the card */
.nt-item.is-pinned > .when { color: #7a5b00; font-weight: 600; }
.nt-foot { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.hm-notes { border: 1px solid var(--cs-border); border-radius: 6px; overflow: hidden; }

/* The center: one row of tabs (the list's three views, then Preferences and Send set apart at the right). */
.nc-tabs > .nc-split { margin-left: auto; }
.nc-table tr.nc-unread td.nc-what .t { font-weight: 600; }
.nc-table td.nc-what .nc-open { color: #1f2d3a; font-size: inherit; font-weight: inherit; text-decoration: none; }
.nc-table td.nc-what .nc-open:hover, .nc-table td.nc-what .nc-open:focus-visible { text-decoration: underline; }
.nc-table td.nc-what .s { font-size: .75rem; color: var(--cs-muted); }
.nc-table td.nc-what .s a { color: #1d55b8; text-decoration: none; } /* the jump: 7.0:1 */
.nc-table td.nc-what .s a:hover { text-decoration: underline; }
.nc-table td.nc-what .s a .bi { font-size: .68rem; margin-left: 3px; }
.nc-table tr.nc-pinned > td { background: #fffbef; }
.nc-table tr.nc-drill > td { background: #f8fafc; }
.nc-table .cs-pick { width: 28px; }
.nc-app { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.nc-prio { color: #a3261f; }
.nc-pin { color: #7a5b00; font-weight: 600; white-space: nowrap; } /* 6.1:1 on the row */

/* Send: the preview and the log. */
.nt-preview { border: 1px solid var(--cs-border); border-radius: 6px; overflow: hidden; }
.nc-mail { border: 1px solid var(--cs-border); border-radius: 6px; background: #fff; font-size: .8rem; }
.nc-mail > .h { padding: 6px 10px; border-bottom: 1px solid var(--cs-border); background: #f6f8fa; }
.nc-mail > .b { padding: 8px 10px; }
.nc-mail > .b > :last-child { margin-bottom: 0; }
.nc-prev-ribbon { border-radius: 6px; border: 1px solid #f1e0a6; }
.nc-sent { padding: 8px 12px; border-bottom: 1px solid #edf0f3; }
.nc-sent:last-child { border-bottom: 0; }

/* Usage (D6, demos/proposals/usage.html): plain HTML bars, no chart library, one colour per meaning, the figure at
   the end of each bar; every chart has its figures as a table under it. */
.us-bars { display: grid; grid-template-columns: minmax(90px, max-content) 1fr minmax(96px, max-content); gap: 6px 10px; align-items: center; font-size: .8rem; }
.us-lab { color: #2c3b4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.us-lab .bi { color: var(--cs-muted); margin-right: 5px; }
.us-track { display: flex; height: 16px; background: #eef1f4; border-radius: 0 4px 4px 0; }
.us-seg { height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; }
.us-people { background: #2458b5; }
.us-views { background: #8fb0e6; }
.us-weekend { background: #c9d3df; }
.us-val { color: #2c3b4a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.us-val small { color: var(--cs-muted); }
.us-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; color: #45535f; margin-top: 10px; }
.us-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.us-days { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding-top: 6px; }
.us-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.us-day .us-col { width: 100%; background: #8fb0e6; border-radius: 2px 2px 0 0; min-height: 2px; }
.us-day.is-weekend .us-col { background: #c9d3df; }
.us-day.is-today .us-col { background: #2458b5; }
.us-day .d { font-size: .62rem; color: var(--cs-muted); margin-top: 3px; white-space: nowrap; }
.us-fallback { margin-top: 10px; }
.us-fallback > summary { font-size: .75rem; color: var(--cs-muted); cursor: pointer; }
.us-fallback table { margin-top: 6px; }
.us-key-cell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: #2c3b4a; }
.us-path { color: var(--cs-muted); font-size: .72rem; }
/* My sign-ins: one line per sign-in, the device in a small square, green for this one. */
.us-mine > li { align-items: flex-start; }
.us-mine .ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--cs-shade-2); color: #45535f; flex-shrink: 0; }
.us-mine .ic.is-now { background: #e3f5ea; color: #1e7a45; }

/* Activity (D6): the kit's .cs-log on a page with room, and an icon avatar for a command or the system. */
.ae-log { --cs-log-time: 7.5rem; --cs-log-who: 7rem; }
.ae-system { width: 18px; height: 18px; background: #45535f; color: #fff; font-size: .6rem; }

/* My card (D7): the QR code at a size a phone reads from across a desk, white around it for the scanner. */
.mc-qr { width: 100%; max-width: 220px; aspect-ratio: 1; background: #fff; padding: 6px; border: 1px solid var(--cs-shade-2); border-radius: 8px; }

/* The office TVs (D7): a full screen read from across a room, sized by the viewport so a 1080p or a 4K
   set fills the same way; dark, high contrast, nothing scrolls. Only on /tv-dash and /tv-dash2. */
body.tv { margin: 0; height: 100vh; overflow: hidden; background: #1c2630; color: #e8eef4; font-family: Arimo, Arial, sans-serif; font-size: 1.15vw; }
.tv h2 { margin: 0 0 .6em; font-size: 1.05em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9fb3c6; }
.tv h2 small { margin-left: .6em; text-transform: none; letter-spacing: 0; font-weight: 400; color: #8597a9; }
.tv h3 { margin: 0; font-size: 1em; font-weight: 600; line-height: 1.25; }
.tv-logo { height: 3.4vw; width: auto; }
.tv-dash { display: grid; height: 100vh; box-sizing: border-box; padding: 1.4vw; gap: 1.1vw;
    grid-template-columns: 1fr 1.25fr .8fr; grid-template-rows: auto 1fr auto;
    grid-template-areas: "top top top" "weather news markets" "starts starts events"; }
.tv-top { grid-area: top; display: flex; align-items: center; gap: 2vw; padding: .4vw 1vw; background: #2a3846; border-radius: .6vw; }
.tv-hello { flex: 1; display: flex; flex-direction: column; font-size: 1.35em; }
.tv-hello span { color: #a9bbcc; font-size: .8em; }
.tv-time { text-align: right; }
.tv-clock { font-size: 3.2em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tv-date { color: #a9bbcc; font-size: 1.05em; margin-top: .25em; }
.tv-panel { position: relative; min-height: 0; overflow: hidden; padding: 1vw 1.1vw; background: #243240; border-radius: .6vw; }
.tv-weather { grid-area: weather; } .tv-news { grid-area: news; } .tv-markets { grid-area: markets; }
.tv-starts { grid-area: starts; } .tv-events { grid-area: events; } .tv-events .tv-list { gap: .5em; } .tv-events .tv-list li { padding-bottom: .5em; } .tv-starts.is-wide { grid-column: 1 / -1; }
.tv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75em; }
.tv-list li { padding-bottom: .75em; border-bottom: 1px solid #34475a; }
.tv-list li:last-child { border-bottom: 0; }
.tv-story { display: flex; gap: .9em; }
.tv-story p { margin: .3em 0 0; color: #b6c5d3; font-size: .85em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-pic { flex: 0 0 7.5vw; height: 4.6vw; border-radius: .35vw; background: #34475a center / cover no-repeat; }
.tv-markets h3 { font-weight: 400; font-size: .95em; }
.tv-now { display: flex; align-items: center; gap: 1vw; margin-bottom: .6em; }
.tv-now > .bi { font-size: 3.6em; color: #ffd166; }
.tv-temp { font-size: 2.6em; font-weight: 700; line-height: 1; }
.tv-words { font-size: 1em; margin-top: .2em; }
.tv-meta { color: #a9bbcc; font-size: .85em; }
.tv-days { list-style: none; margin: 0; padding: 0; }
.tv-days li { display: grid; grid-template-columns: 3em 2em 3em 3em 1fr; align-items: center; padding: .32em 0; border-top: 1px solid #34475a; font-variant-numeric: tabular-nums; }
.tv-days .bi { font-size: 1.3em; color: #ffd166; }
.tv-day { font-weight: 600; }
.tv-hi { font-weight: 700; } .tv-lo { color: #8fa3b6; }
.tv-rain { color: #8fc1ff; font-size: .9em; } .tv-rain .bi { color: #8fc1ff; font-size: 1em; margin-right: .2em; }
.tv-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tv-table th, .tv-table td { padding: .3em .6em; text-align: right; border-bottom: 1px solid #34475a; }
.tv-table thead th { color: #9fb3c6; font-weight: 600; font-size: .9em; }
.tv-table tbody th { text-align: left; font-weight: 600; color: #c9d6e2; }
.tv-table td { font-size: 1.1em; font-weight: 600; }
.tv-table .is-here { background: #2f4a63; color: #fff; }
.tv-table .tv-total { color: #fff; font-weight: 700; }
.tv-target { display: flex; align-items: center; gap: 1em; margin-top: .9em; }
.tv-target-label { color: #a9bbcc; white-space: nowrap; }
.tv-target-value { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv-bar { flex: 1; height: 1.1em; background: #34475a; border-radius: 99px; overflow: hidden; }
.tv-fill { height: 100%; background: #3fb26f; border-radius: 99px; }
.tv-event { display: flex; gap: 1em; align-items: baseline; min-width: 0; }
.tv-event h3 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-when { flex: 0 0 6.5em; color: #ffd166; font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-none { color: #a9bbcc; margin: 0; }
.tv-stale { position: absolute; right: 1vw; bottom: .5vw; margin: 0; font-size: .7em; color: #8597a9; }
.tv-zoho { display: flex; height: 100vh; }
.tv-side { flex: 0 0 21vw; display: flex; flex-direction: column; gap: 1vw; padding: 2vw 1.4vw; background: #243240; text-align: center; }
.tv-side .tv-clock { font-size: 3.6em; }
.tv-side .tv-panel { padding: 0; text-align: left; background: none; }
.tv-side .tv-days li { grid-template-columns: 3em 2em 3em 3em; }
.tv-side .tv-days .tv-rain { display: none; }
.tv-side .tv-logo { margin-top: auto; height: auto; width: 100%; }
.tv-report { flex: 1; border: 0; height: 100vh; background: #fff; }
div.tv-report { display: flex; align-items: center; justify-content: center; background: #1c2630; }
.tv-unknown { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vw; text-align: center; }
.tv-unknown h1 { margin: 0; font-size: 2.4em; }