/*
  Monster Films — system components (PROTOTYPE, ticket 12). The seed of the design system: every component
  the painel web uses, in every state, on the surface scale of tokens.css. Screens compose these and add
  layout only. Rules that hold everywhere:
    - a plane is told apart by fill: shell s0, sheet s1, panel s2, component s3, hover/selected s4, inset well;
    - selected in a set (filter card, segment, chip) = one step up plus a yellow edge; the current nav item is one
      step up only; yellow otherwise means now or needs action, so it is spent sparingly;
    - focus = 2px yellow ring; disabled = 40% and no hover; error = red inset line and a message;
    - corners are square ([site] radius 0); interface text is sentence case, 14px.
  .is-hover and .is-focus twin every :hover and :focus rule so componentes.html can show those states still.
*/

/* shell */
html { scrollbar-gutter: stable; background: var(--sys-s1); }  /* the canvas beside the content, not the browser's own dark grey */  /* views with and without a scrollbar keep the shell in place; the look is assets/native.css */
.ui-shell { min-height: 100vh; background: var(--sys-s1); display: grid; grid-template-rows: var(--sys-bar-h) 1fr; }
.ui-topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px; height: var(--sys-bar-h); padding: 0 24px 0 40px; background: var(--sys-bar); }
.ui-brand { display: flex; align-items: center; gap: 14px; margin-right: 32px; }
.ui-brand img { height: 13px; display: block; }
.ui-brand span { color: var(--mf-text-3); font-size: 13px; padding-left: 14px; box-shadow: inset 1px 0 0 var(--sys-hair-strong); }
.ui-nav { display: flex; gap: 4px; }
.ui-nav__item { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; color: var(--mf-text-2); text-decoration: none; font-weight: 500; transition: background var(--mf-dur) var(--mf-ease), color var(--mf-dur) var(--mf-ease); }
.ui-nav__item:hover, .ui-nav__item.is-hover { background: var(--sys-s3); color: var(--mf-text); }
.ui-nav__item[aria-current] { background: var(--sys-s3); color: var(--mf-text); }
.ui-nav__item:focus-visible, .ui-nav__item.is-focus { outline: var(--mf-focus); outline-offset: -2px; }
.ui-user { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ui-user__who { line-height: 1.2; padding-right: 6px; }
.ui-user__who small { display: block; color: var(--mf-text-3); font-size: var(--sys-text-2); }
.ui-avatar { width: 32px; height: 32px; display: grid; place-items: center; background: var(--sys-s4); font-size: 12px; font-weight: 600; flex: none; }
.ui-sheet { padding: 32px 40px 48px; min-width: 0; }

/* type */
.ui-title { margin: 0 0 4px; font-size: var(--sys-title); font-weight: 600; letter-spacing: -.01em; }
.ui-subtitle { margin: 0; color: var(--mf-text-2); }
.ui-head { font: 500 var(--sys-head)/1.2 var(--mf-sans); letter-spacing: var(--sys-track-head); text-transform: uppercase; color: var(--mf-text-3); }

/* buttons */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--sys-control); padding: 0 14px; border: 0; background: var(--sys-s3); color: var(--mf-text); font: 500 var(--sys-text)/1 var(--mf-sans); white-space: nowrap; cursor: pointer; transition: background var(--mf-dur) var(--mf-ease), color var(--mf-dur) var(--mf-ease); }
.ui-btn:hover:not(:disabled), .ui-btn.is-hover { background: var(--sys-s4); }
.ui-btn:focus-visible, .ui-btn.is-focus { outline: var(--mf-focus); outline-offset: 2px; }
.ui-btn:disabled, .ui-btn[aria-disabled=true] { opacity: .4; cursor: not-allowed; }
.ui-btn--primary { background: var(--mf-text); color: #000; }
.ui-btn--primary:hover:not(:disabled), .ui-btn--primary.is-hover { background: var(--mf-yellow); }
.ui-btn--ghost { background: transparent; color: var(--mf-text-2); }
.ui-btn--ghost:hover:not(:disabled), .ui-btn--ghost.is-hover { background: var(--sys-s3); color: var(--mf-text); }
.ui-btn--danger { background: rgb(255 101 104 / .14); color: var(--mf-bad); }
.ui-btn--danger:hover:not(:disabled), .ui-btn--danger.is-hover { background: var(--mf-bad); color: #000; }
.ui-btn--sm { height: 32px; padding: 0 12px; font-size: var(--sys-text-2); }
.ui-btn--icon { width: var(--sys-control); padding: 0; color: var(--mf-text-2); background: transparent; }
.ui-btn--icon:hover:not(:disabled), .ui-btn--icon.is-hover { background: var(--sys-s4); color: var(--mf-text); }
.ui-btn--icon.ui-btn--sm { width: 32px; }

/* fields */
.ui-field { display: grid; gap: 6px; margin-bottom: 16px; }
.ui-field__label { font-size: var(--sys-text-2); font-weight: 500; color: var(--mf-text-2); }
.ui-field__help { font-size: 12px; color: var(--mf-text-3); }
.ui-field__error { display: none; font-size: 12px; color: var(--mf-bad); }
.ui-field.is-invalid .ui-field__error { display: block; }
.ui-input { box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px; border: 0; background: var(--sys-well); color: var(--mf-text); font: 400 var(--sys-text)/1 var(--mf-sans); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--mf-dur) var(--mf-ease); color-scheme: dark; }
.ui-input::placeholder { color: var(--mf-text-3); }
.ui-input:hover, .ui-input.is-hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.ui-input:focus, .ui-input.is-focus { outline: none; box-shadow: inset 0 0 0 2px var(--mf-yellow); }
.ui-field.is-invalid .ui-input { box-shadow: inset 0 0 0 1px var(--mf-bad); }
.ui-input--mono { font-family: var(--mf-mono); letter-spacing: .04em; }
.ui-input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.ui-input[type=number]::-webkit-inner-spin-button, .ui-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ui-search { display: flex; align-items: center; gap: 10px; height: var(--sys-control); padding: 0 12px; background: var(--sys-well); color: var(--mf-text-3); box-shadow: inset 0 0 0 1px transparent; }
.ui-search:focus-within, .ui-search.is-focus { box-shadow: inset 0 0 0 2px var(--mf-yellow); }
.ui-search input { all: unset; flex: 1; min-width: 0; color: var(--mf-text); }
.ui-search input::placeholder { color: var(--mf-text-3); }

/* segmented control and chips: a set where one is chosen */
.ui-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--sys-well); }
.ui-seg label { position: relative; }
.ui-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ui-seg span { display: flex; align-items: center; height: 30px; padding: 0 12px; font-size: var(--sys-text-2); font-weight: 500; color: var(--mf-text-2); }
.ui-seg input:hover + span, .ui-seg input.is-hover + span { color: var(--mf-text); }
.ui-seg input:checked + span { background: var(--sys-s4); color: var(--mf-text); box-shadow: inset 0 -2px 0 var(--mf-yellow); }
.ui-seg input:focus-visible + span, .ui-seg input.is-focus + span { outline: var(--mf-focus); }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chip { height: 28px; padding: 0 10px; border: 0; background: var(--sys-s3); color: var(--mf-text-2); font: 500 12px/1 var(--mf-sans); cursor: pointer; }
.ui-chip:hover, .ui-chip.is-hover { background: var(--sys-s4); color: var(--mf-text); }
.ui-chip[aria-pressed=true] { background: var(--sys-s4); color: var(--mf-text); box-shadow: inset 0 -2px 0 var(--mf-yellow); }
.ui-chip:focus-visible, .ui-chip.is-focus { outline: var(--mf-focus); outline-offset: 2px; }

/* checkbox */
.ui-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.ui-check input { appearance: none; margin: 1px 0 0; width: 18px; height: 18px; flex: none; background: var(--sys-well); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); cursor: pointer; }
.ui-check input:checked { background: var(--mf-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h1v1H6zM5 2h1v1H5zM0 3h1v1H0zM4 3h1v1H4zM1 4h1v1H1zM3 4h1v1H3zM2 5h1v1H2z'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
.ui-check input:focus-visible, .ui-check input.is-focus { outline: var(--mf-focus); outline-offset: 2px; }
.ui-check small { display: block; color: var(--mf-text-3); font-size: 12px; margin-top: 2px; }

/* stat card: a filter whose count carries the brand */
.ui-card { all: unset; box-sizing: border-box; display: grid; gap: 4px; padding: 16px 20px 14px; background: var(--sys-s2); cursor: pointer; transition: background var(--mf-dur) var(--mf-ease); }
.ui-card:hover, .ui-card.is-hover { background: var(--sys-s3); }
.ui-card[aria-pressed=true] { background: var(--sys-s3); box-shadow: inset 0 2px 0 var(--mf-yellow); }
.ui-card:focus-visible, .ui-card.is-focus { outline: var(--mf-focus); outline-offset: 2px; }
.ui-card__num { font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -.02em; margin-bottom: 8px; }
.ui-card__label { font-weight: 500; }
.ui-card__note { font-size: var(--sys-text-2); color: var(--mf-text-3); }
.ui-card__note.is-now { color: var(--mf-yellow); }

/* panel and table */
.ui-panel { background: var(--sys-s2); position: relative; }
.ui-panel__head { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 12px; color: var(--mf-text-2); font-size: var(--sys-text-2); }
.ui-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ui-table thead th { height: 40px; padding: 0 16px; text-align: left; white-space: nowrap; background: var(--sys-s3); }
.ui-table td { height: 60px; padding: 0 16px; border-bottom: 1px solid var(--sys-hair); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td:not(.ui-table__bed), .ui-table tbody tr.is-hover td:not(.ui-table__bed) { background: var(--sys-s3); }
.ui-table .ui-table__bed, .ui-table thead th.ui-table__bed { padding: 0; background: var(--sys-well); }

/* status: word and glyph, never colour alone */
.ui-status { display: inline-flex; align-items: center; gap: 8px; }
.ui-status .mf-pix { width: 10px; height: 10px; }
.ui-status--bad { color: var(--mf-bad); }
.ui-status--off { color: var(--mf-text-2); }

/* menu */
.ui-menu { position: fixed; z-index: 20; min-width: 224px; padding: 4px; background: var(--sys-s3); box-shadow: var(--sys-shadow-overlay); }
.ui-menu__item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 12px; color: var(--mf-text-2); cursor: pointer; }
.ui-menu__item:hover, .ui-menu__item.is-hover { background: var(--sys-s4); color: var(--mf-text); }
.ui-menu__item:focus-visible, .ui-menu__item.is-focus { background: var(--sys-s4); color: var(--mf-text); outline: var(--mf-focus); outline-offset: -2px; }
.ui-menu__item--danger { color: var(--mf-bad); }
.ui-menu__item--danger:hover, .ui-menu__item--danger:focus-visible, .ui-menu__item--danger.is-hover, .ui-menu__item--danger.is-focus { color: var(--mf-bad); }
.ui-menu__sep { height: 1px; margin: 4px 0; background: var(--sys-hair); }

/* modal */
.ui-scrim { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: rgb(0 0 0 / .72); }
.ui-modal { width: 100%; max-width: 480px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--sys-s2); box-shadow: var(--sys-shadow-overlay); }
.ui-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 6px; }
.ui-modal__title { margin: 0; font-size: 20px; font-weight: 600; }
.ui-modal__body { padding: 10px 24px 4px; overflow: auto; overscroll-behavior: contain; }
.ui-modal__body > p { margin: 0 0 16px; color: var(--mf-text-2); }
.ui-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 24px; }
.ui-well { background: var(--sys-well); padding: 14px 16px; margin: 0 0 16px; }
.ui-well--row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

/* toast */
.ui-toast { position: fixed; z-index: 40; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--mf-text); color: #000; font-weight: 500; box-shadow: var(--sys-shadow-overlay); }

/* tooltip: one floating layer above every plane (system.js places it), never clipped by a cell */
.ui-tooltip { position: fixed; z-index: 60; max-width: 280px; padding: 7px 10px; background: var(--sys-s4); color: var(--mf-text); font: 400 12px/1.4 var(--mf-sans); pointer-events: none; box-shadow: var(--sys-shadow-overlay); }

/* empty state */
.ui-empty { display: grid; justify-items: center; gap: 6px; padding: 64px 24px; text-align: center; }
.ui-empty b { font-size: 16px; font-weight: 600; }
.ui-empty p { margin: 0 0 12px; color: var(--mf-text-2); max-width: 380px; }

/* added for the complete base screen (2026-10-02) */
/* attention: the row action that needs doing now; yellow means now or needs action, so it is not the white primary */
.ui-btn--attention { background: rgb(255 255 6 / .12); color: var(--mf-yellow); }
.ui-btn--attention:hover:not(:disabled), .ui-btn--attention.is-hover { background: var(--mf-yellow); color: #000; }
/* a row lights up end to end, the timeline's bed included */
.ui-table tbody tr:hover td.ui-table__bed, .ui-table tbody tr.is-hover td.ui-table__bed { background: var(--sys-well-hover); }
.ui-table tbody tr { transition: background var(--mf-dur) var(--mf-ease); }
.ui-table td { transition: background 150ms var(--mf-ease); }
.ui-table thead th { position: sticky; top: var(--sys-bar-h); z-index: 3; }
.ui-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ui-sort:hover, .ui-sort.is-hover, .ui-sort.is-sorted { color: var(--mf-text); }
.ui-sort:focus-visible, .ui-sort.is-focus { outline: var(--mf-focus); outline-offset: 4px; }
.ui-sort .mf-pix { width: 8px; height: 8px; }
/* tags and badges */
.ui-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; background: var(--sys-s3); color: var(--mf-text-2); font-size: 12px; font-weight: 500; }
.ui-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; background: var(--mf-text); color: #000; font-size: 11px; font-weight: 600; }
/* password field with its toggle */
.ui-input-wrap { position: relative; }
.ui-input-wrap .ui-input { padding-right: 84px; }
.ui-input-wrap .ui-btn { position: absolute; right: 4px; top: 4px; height: 32px; }
/* login: the one screen outside the shell */
.ui-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--sys-s0); }
.ui-login__card { width: 100%; max-width: 400px; background: var(--sys-s2); padding: 32px; }
.ui-login__card img { height: 13px; display: block; margin-bottom: 28px; }
.ui-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; background: rgb(255 101 104 / .12); color: var(--mf-bad); font-size: var(--sys-text-2); }
.ui-alert .mf-pix { width: 12px; height: 12px; margin-top: 2px; flex: none; }
/* menu keyboard focus reads like hover */
.ui-menu__item[aria-disabled=true] { opacity: .4; cursor: not-allowed; }
.ui-toast button { all: unset; cursor: pointer; margin-left: 6px; padding: 2px 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ui-toast button:focus-visible { outline: 2px solid #000; }

.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-toast .kbd { font: 500 11px var(--mf-mono); opacity: .6; margin-left: 6px; }

/* a control row inside a field: the input takes the width, its unit control keeps its own */
.ui-field__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ui-chips--fill { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.ui-chips--fill .ui-chip { height: 32px; }
.ui-field__row .ui-seg span { height: 34px; }

/* date field: a button over a hidden ISO input, with its own calendar (system.js) instead of the browser's */
.ui-date { position: relative; }
.ui-date__btn { display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; font-feature-settings: var(--sys-num); }
.ui-date__btn::after { content: ""; flex: none; width: 14px; height: 14px; background: var(--mf-text-2); opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 2.5h11v10h-11zM1.5 5.5h11M4.5 0.5v3M9.5 0.5v3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 2.5h11v10h-11zM1.5 5.5h11M4.5 0.5v3M9.5 0.5v3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
.ui-date__btn[aria-expanded=true]::after, .ui-date__btn:hover::after { background: var(--mf-text); opacity: 1; }
.ui-cal { position: fixed; z-index: 55; width: 296px; padding: 12px; background: var(--sys-s3); box-shadow: var(--sys-shadow-overlay), inset 0 0 0 1px rgb(255 255 255 / .06); font: 400 13px/1 var(--mf-sans); font-feature-settings: var(--sys-num); color: var(--mf-text); }
.ui-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ui-cal__title { font-size: 14px; font-weight: 600; }
.ui-cal .ui-btn--icon { font: 400 20px/1 Arial, sans-serif; }  /* Anybody draws the arrows thin and low */
.ui-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ui-cal__wd { padding: 6px 0; text-align: center; color: var(--mf-text-3); font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.ui-cal__day { position: relative; height: 36px; padding: 0; border: 0; background: transparent; color: var(--mf-text); font: inherit; cursor: pointer; }
.ui-cal__day:hover { background: var(--sys-s4); }
.ui-cal__day[aria-pressed=true] { background: var(--mf-text); color: #000; }
.ui-cal__day[aria-disabled=true] { color: var(--mf-text-dim); cursor: not-allowed; background: transparent; }
.ui-cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; background: var(--mf-yellow); }
.ui-cal__day[aria-pressed=true].is-today::after { background: #000; }
.ui-cal__day:focus-visible { outline: var(--mf-focus); outline-offset: -2px; }