2026-09-24 14:35:05 +03:00
: root { font-family : Inter , Segoe UI , Arial , sans-serif ; color : #243a36 ; background : #f7f9f8 ; font-size : 14 px ; --green : #176b52 ; --ink : #233d35 ; --muted : #7d8a85 ; --line : #e3e9e5 ; --soft : #edf3ef } * { box-sizing : border-box } body { margin : 0 } button , input , select , textarea { font : inherit ; color : inherit } button { cursor : pointer ; background : white ; border : 1 px solid #dbe3de ; border-radius : 7 px ; padding : 9 px 13 px ; transition : background .15 s } button : hover { background : #eef4f0 } button : disabled { opacity : .5 ; cursor : wait } button . primary { background : var ( -- green ); color : white ; border-color : var ( -- green ); font-weight : 600 } button . primary : hover { background : #12543f } button . text { border : 0 ; background : none ; padding : 6 px 3 px ; color : var ( -- green )} button . danger { color : #a55252 } input , select , textarea { border : 1 px solid #d8e1da ; border-radius : 7 px ; background : white ; padding : 11 px 12 px ; max-width : 100 % ; outline : none } input : focus , select : focus , textarea : focus , button : focus-visible { outline : 2 px solid #4f9d7e ; outline-offset : 2 px } textarea { min-height : 85 px ; resize : vertical } label { display : flex ; flex-direction : column ; gap : 8 px ; font-size : 13 px ; font-weight : 600 ; margin : 16 px 0 } label . check { flex-direction : row ; align-items : center ; font-weight : 400 ; gap : 9 px } input [ type = checkbox ] { accent-color : var ( -- green ); width : 16 px ; height : 16 px } h1 , h2 , p { margin-top : 0 } h1 { font-size : 30 px ; letter-spacing : -1 px ; font-weight : 600 ; margin-bottom : 9 px } h2 { font-size : 17 px ; letter-spacing : -.3 px ; font-weight : 600 ; margin-bottom : 12 px } p { line-height : 1.6 } small { font-size : 12 px }. muted , small { color : var ( -- muted )}. eyebrow { font-size : 10 px ; letter-spacing : 1.8 px ; font-weight : 700 ; color : #788b81 }. brand { display : flex ; align-items : center ; gap : 10 px ; color : #215b45 ; text-decoration : none ; font-size : 38 px }. brand span { font-size : 28 px ; font-weight : 650 ; letter-spacing : -1 px }. shell { display : flex ; min-height : 100 vh }. sidebar { width : 236 px ; padding : 29 px 21 px 15 px ; background : #fff ; border-right : 1 px solid var ( -- line ); position : fixed ; top : 0 ; bottom : 0 ; display : flex ; flex-direction : column }. workspace-label { margin-top : 38 px ; margin-bottom : 11 px }. workspace-select { width : 100 % ; font-weight : 600 ; background : #f6f8f6 ; padding : 12 px 10 px }. sidebar nav { margin-top : 24 px ; display : flex ; flex-direction : column ; gap : 6 px }. sidebar nav : is ( button , a ) { display : flex ; align-items : center ; gap : 12 px ; border : 0 ; background : none ; text-align : left ; padding : 13 px 12 px ; color : #728179 ; font-size : 13 px }. sidebar nav : is ( button , a ) . active { background : #eaf3ed ; color : #236648 ; font-weight : 600 }. nav-icon { font-size : 20 px ; width : 21 px ; text-align : center ; font-weight : 400 }. counter { margin-left : auto ; background : #d8e8df ; padding : 1 px 6 px ; border-radius : 4 px ; font-size : 11 px }. sidebar-bottom { margin-top : auto }. side-note { display : flex ; align-items : center ; gap : 7 px ; font-size : 10 px ; color : #8a958e ; margin : 30 px 0 22 px }. status-dot { display : inline-block ; width : 7 px ; height : 7 px ; background : #639b7c ; border-radius : 50 % ; flex-shrink : 0 }. account-button { display : flex ; width : 100 % ; gap : 10 px ; text-align : left ; padding : 14 px 0 ; border : 0 ; border-top : 1 px solid var ( -- line ); border-radius : 0 ; background : none }. account-button strong , . account-button small { display : block ; margin : 2 px 0 }. account-button > span : last-child { margin-left : auto ; align-self : center ; color : #8c9991 }. avatar { width : 36 px ; height : 36 px ; border-radius : 50 % ; display : inline-flex ; align-items : center ; justify-content : center ; flex-shrink : 0 ; font-size : 12 px ; font-weight : 600 }. avatar . small { width : 27 px ; height : 27 px ; font-size : 10 px }. teal { background : #e3f2ed ; color : #3d846b }. purple { background : #eee9f7 ; color : #8874aa }. amber { background : #fcf0da ; color : #a27d39 }. blue { background : #e6effa ; color : #5b84b4 }. rose { background : #f7e8eb ; color : #ac7482 }. signout { font-size : 11 px ; margin-left : 47 px }. main { margin-left : 236 px ; flex : 1 ; min-width : 0 }. topbar { height : 78 px ; background : #fff ; border-bottom : 1 px solid var ( -- line ); padding : 0 40 px ; display : flex ; align-items : center ; justify-content : space-between ; font-size : 12 px }. slash { margin : 0 14 px ; color : #b7c1ba }. top-actions { display : flex ; gap : 20 px ; align-items : center }. content { max-width : 1460 px ; margin : 0 auto ; padding : 38 px 40 px 45 px }. page-heading { display : flex ; justify-content : space-between ; align-items : center ; gap : 15 px ; margin-bottom : 24 px }. page-heading . eyebrow { margin-bottom : 10 px }. page-heading p { margin : 0 ; font-size : 13 px }. sync-bar { display : flex ; align-items : center ; gap : 9 px ; border : 1 px solid #d
@ media ( min - width : 1600 px ) { . content { padding-top : 48 px }. day { min-height : 130 px } } @ media ( max-width : 1200px ) {. sidebar { width : 210 px ; padding : 25 px 16 px }. main { margin-left : 210 px }. content { padding : 28 px 24 px }. topbar { padding : 0 24 px }. page-footer { margin : 0 24 px }. summary-card { padding : 18 px 15 px }. person-line strong { font-size : 15 px }. toolbar-controls { gap : 7 px }. calendar-toolbar { padding : 18 px 15 px }. day { padding : 9 px 5 px ; min-height : 102 px }. assignment { padding : 6 px 4 px ; font-size : 10 px }}@ media ( max-width : 950px ) {. sidebar { width : 75 px ; padding : 23 px 10 px }. sidebar . brand span , . workspace-label , . workspace-select , . sidebar nav button > span : not ( . nav-icon ), . side-note , . account-button > span : not ( . avatar ), . signout { display : none }. sidebar nav { margin-top : 40 px }. sidebar nav : is ( button , a ) { padding : 12 px ; justify-content : center }. sidebar . brand { justify-content : center }. main { margin-left : 75 px }. sidebar . account-button { justify-content : center }. summary-grid { gap : 10 px }. summary-card { padding : 15 px 12 px }. page-heading h1 { font-size : 25 px }. page-heading > . primary { font-size : 12 px }. top-actions { gap : 10 px }. login-story { padding : 40 px }. login-story h1 { font-size : 38 px }}@ media ( max-width : 700px ) {. sidebar { position : sticky ; top : 0 ; width : 100 % ; height : auto ; z-index : 10 ; flex-direction : row ; align-items : center ; gap : 10 px ; padding : 8 px 12 px ; border-right : 0 ; border-bottom : 1 px solid var ( -- line )}. sidebar . brand { font-size : 29 px }. sidebar nav { margin : 0 ; flex-direction : row ; gap : 0 ; flex : 1 ; justify-content : center }. sidebar nav : is ( button , a ) { padding : 8 px }. sidebar . nav-icon { font-size : 20 px ; width : 18 px }. sidebar-bottom { margin : 0 }. account-button { padding : 0 ; border : 0 }. account-button . avatar { width : 28 px ; height : 28 px ; font-size : 10 px }. shell { display : block }. main { margin : 0 }. topbar { height : auto ; min-height : 57 px ; padding : 10 px 15 px ; gap : 10 px ; flex-wrap : wrap }. topbar strong { font-size : 11 px }. top-actions { margin-left : auto }. top-actions button { font-size : 10 px }. content { padding : 25 px 15 px }. page-heading { align-items : flex-start ; flex-direction : column }. page-heading h1 { font-size : 27 px }. page-heading p { font-size : 12 px }. summary-grid { grid-template-columns : 1 fr 1 fr }. summary-card : first-child { grid-column : 1 /- 1 }. summary-card { min-height : 100 px }. summary-card . eyebrow { margin-bottom : 13 px }. calendar-toolbar { flex-wrap : wrap ; padding : 16 px 12 px }. toolbar-controls { width : 100 % ; justify-content : space-between }. toolbar-controls select { max-width : 165 px }. weekdays span { padding : 10 px 3 px ; text-align : center ; font-size : 8 px }. day { min-height : 90 px ; padding : 6 px 3 px }. day-date { font-size : 10 px ; width : 20 px ; height : 20 px ; line-height : 20 px ; margin-bottom : 4 px }. assignment { font-size : 9 px ; padding : 6 px 3 px ; gap : 3 px }. mini-dot { display : none }. calendar-footer { padding : 12 px ; flex-direction : column ; font-size : 9 px }. two-columns , . card-grid { grid-template-columns : 1 fr }. modal . two-columns { grid-template-columns : 1 fr 1 fr }. sync-bar { font-size : 10 px ; padding : 10 px }. sync-bar . muted { margin-left : 0 }. page-footer { margin : 0 15 px ; gap : 20 px }. page-footer span { font-size : 9 px ; letter-spacing : 0 }. section-line h2 { font-size : 15 px }. rule-card { padding : 20 px }. login { grid-template-columns : 1 fr }. login-story { min-height : 0 ; padding : 28 px 30 px }. login-story > div { display : none }. login-story . quiet { margin-top : 14 px }. login-form { padding : 35 px 0 }. modal-backdrop { padding : 12 px }. modal { padding : 20 px ; max-height : calc ( 100 dvh - 24 px )}. modal-heading h2 { font-size : 22 px }. modal-footer button { font-size : 11 px ; padding : 9 px }. audit-row summary { font-size : 11 px }. audit-row time { margin-left : 0 }}
. mobile-workspace-select { display : none }@ media ( max-width : 950px ) {. mobile-workspace-select { display : block ; max-width : 210 px }}@ media ( max-width : 700px ) {. mobile-workspace-select { width : 100 % ; max-width : 100 % }}
/* People, country calendars, and readable policy flows. */
. person-select { display : flex ; align-items : center ; justify-content : space-between ; gap : 12 px ; text-align : left ; min-height : 44 px }. wide { width : 100 % ; margin-top : 15 px }. picker-results { max-height : 260 px ; overflow : auto ; border : 1 px solid var ( -- line ); border-radius : 8 px }. picker-option { display : flex ; align-items : center ; gap : 12 px ; width : 100 % ; border : 0 ; border-bottom : 1 px solid var ( -- line ); border-radius : 0 ; text-align : left ; padding : 13 px }. picker-option > span : nth-child ( 2 ) { flex : 1 ; min-width : 0 ; overflow-wrap : anywhere }. picker-option strong , . picker-option small { display : block }. picker-option small { margin-top : 5 px }. picker-option . badge { font-size : 9 px }. email-contact { margin-top : 20 px ; padding : 18 px ; background : #f3f7f4 ; border-radius : 8 px }. person-picker . section-line { margin-top : 0 }. person-picker h3 { margin : 0 }. person-picker . primary { overflow-wrap : anywhere ; max-width : 100 % }. holiday-group { margin : 12 px 0 18 px }. holiday-group h3 { display : flex ; gap : 8 px ; align-items : center ; font-size : 14 px ; border-bottom : 1 px solid var ( -- line ); padding-bottom : 12 px }. holiday-group . list-row { padding : 10 px 0 }. csv-input { min-height : 200 px ; font-family : Consolas , monospace ; font-size : 12 px ; line-height : 1.6 }. import-summary { display : flex ; gap : 10 px ; flex-wrap : wrap ; padding : 15 px ; background : #eaf4ed ; border-radius : 8 px ; font-size : 12 px }. import-summary strong { color : var ( -- green )}. import-table { max-height : 260 px ; overflow : auto ; border : 1 px solid var ( -- line ); border-radius : 8 px }. import-table > div { display : grid ; grid-template-columns : 1 fr 100 px 1.5 fr ; gap : 10 px ; padding : 10 px ; border-bottom : 1 px solid var ( -- line ); font-size : 12 px ; overflow-wrap : anywhere }. import-table-head { background : #f2f6f2 ; font-weight : 600 ; position : sticky ; top : 0 }. validation-error , . validation-warning { padding : 9 px 12 px ; border-radius : 6 px ; font-size : 12 px }. validation-error { background : #fff0eb ; color : #9c492f }. validation-warning { background : #fff6e5 ; color : #806136 }. danger-text { color : #9c492f }. flow-origin { display : inline-block ; border : 1 px dashed #a9c4b2 ; color : #678373 ; border-radius : 20 px ; padding : 7 px 12 px ; font-size : 11 px }. flow-arrow { color : #789184 ; font-size : 11 px ; padding : 9 px 0 ; display : flex ; gap : 10 px ; align-items : center }. flow-arrow > span : first-child { font-size : 22 px ; line-height : 1 }. flow-node { display : flex ; align-items : center ; gap : 11 px ; background : #f3f7f4 ; border : 1 px solid #dce8df ; border-radius : 8 px ; padding : 13 px ; font-size : 12 px }. step-number { display : inline-flex ; align-items : center ; justify-content : center ; width : 24 px ; height : 24 px ; border-radius : 50 % ; background : #dcecdf ; color : #407553 ; font-size : 11 px ; flex-shrink : 0 }. escalation-flow { margin : 18 px 0 }. coverage-flow > div { display : flex ; align-items : center ; gap : 10 px ; font-size : 12 px }. coverage-flow b { display : inline - grid ; place-items : center ; width : 23 px ; height : 23 px ; background : #edf3ef ; border-radius : 50 % ; font-size : 11 px }. coverage-flow small { margin-left : auto }. coverage-flow . flow-arrow { padding-left : 7 px }. routing-list { display : grid ; gap : 12 px }. routing-card { padding : 18 px 21 px }. route-heading { display : flex ; align-items : center ; gap : 12 px }. route-heading button { font-size : 11 px }. route-flow { display : flex ; align-items : center ; gap : 12 px ; flex-wrap : wrap ; margin-top : 15 px ; font-size : 12 px }. logic-key { font-size : 10 px ; font-weight : 700 ; letter-spacing : 1 px ; color : #468364 }. logic-conditions { display : flex ; align-items : center ; flex-wrap : wrap ; gap : 7 px ; flex : 1 ; min-width : 140 px }. condition-chip { display : inline-block ; padding : 7 px 9 px ; border : 1 px solid #dae5df ; border-radius : 5 px ; background : #f5f8f6 ; overflow-wrap : anywhere ; max-width : 100 % ; font-size : 11 px }. condition-chip . hours { background : #f9f3e8 ; color : #967444 ; border-color : #ebdec3 }. condition-group { display : inline-flex ; align-items : center ; gap : 7 px ; max-width : 100 % }. logic-and { font-size : 9 px ; font-weight : 700 ; color : #93a399 ; letter-spacing : .5 px }. route-result { padding : 9 px 12 px ; border-radius : 6 px ; background : #eaf3ed ; color : #33744e ; font-weight : 600 ; max-width : 100 % ; overflow-wrap : anywhere }. horizontal { font-size : 23 px }. logic-editor { background : #f7f9f7 ; border : 1 px solid #e0e8e1 ; border-radius : 9 px ; padding : 15 px ; margin-top : 20 px }. logic-header { display : flex ; gap : 10 px ; align-items : center ; font-size : 12 px ; flex-wrap : wrap }. condition-editor { display : grid ; grid-template-columns : 32 px minmax ( 75 px , 1 fr ) minmax ( 85 px , 1 fr ) minmax ( 90 px , 1.1 fr ) auto 28 px ; gap : 6 px ; align-items : center ; margin : 12 px 0 }. condition
@ media ( max-width : 700px ) {. condition-editor { grid-template-columns : 1 fr 1 fr 1 fr }. condition-editor > . logic-and { grid-column : 1 /- 1 }. condition-editor label { justify-self : start }. condition-editor button { justify-self : end }. condition-editor input : not ([ type = checkbox ]) { grid-column : 3 }. route-flow { gap : 8 px }. logic-conditions { flex-basis : 80 % }. routing-card { padding : 15 px }. route-result { font-size : 11 px }. import-table > div { grid-template-columns : 75 px 85 px 1 fr ; font-size : 10 px }. day-clock { font-size : 7 px }. day { min-height : 100 px }. picker-option { padding : 10 px 7 px }. picker-option . badge { display : none }. coverage-flow > div { flex-wrap : wrap }. coverage-flow small { margin-left : 0 }}
/* Configuration graph operations. */
. drag-handle { padding : 5 px 7 px ; font-size : 22 px ; line-height : 1 ; border-color : transparent ; background : transparent ; color : #8ba292 ; cursor : grab ; touch-action : manipulation }. drag-handle : active { cursor : grabbing }. route-moves { display : flex ; gap : 3 px }. move-route { padding : 5 px 8 px ; font-size : 13 px !important }. move-route : disabled { cursor : default ; opacity : .3 }. routing-card { position : relative ; transition : opacity .15 s , box-shadow .15 s }. route-dragging { opacity : .4 }. routing-card . drop-before : before , . routing-card . drop-after : after { content : '' ; position : absolute ; height : 3 px ; left : 0 ; right : 0 ; background : #2e8b60 ; border-radius : 3 px }. routing-card . drop-before : before { top : -8 px }. routing-card . drop-after : after { bottom : -8 px }. route-heading . route-position { min-width : 28 px ; padding : 6 px }. route-heading . grow { overflow-wrap : anywhere }. dependency-list { border : 1 px solid var ( -- line ); border-radius : 8 px ; padding : 14 px 16 px ; margin : 16 px 0 }. dependency-list h3 { font-size : 12 px ; color : #68816f ; margin : 0 0 8 px }. dependency-list . list-row { font-size : 12 px }. removal-preview . validation-warning p { margin : 7 px 0 0 ; font-weight : 600 } button . primary . remove-confirm { background : #985b45 ; border-color : #985b45 }. removal-preview p { font-size : 13 px }. removal-preview . badge { white-space : nowrap }
@ media ( max-width : 700px ) {. route-heading { flex-wrap : wrap ; gap : 7 px }. route-heading . grow { flex-basis : calc ( 100 % - 70 px )}. route-heading . route-moves { margin-left : auto }. dependency-list . list-row { align-items : flex-start ; flex-wrap : wrap }. removal-preview . badge { font-size : 9 px }}
. date-field { display : flex ; position : relative ; align-items : stretch ; min-width : 0 }. date-field > input [ type = text ] { width : 100 % ; min-width : 0 ; border-radius : 7 px 0 0 7 px }. date-field > button { border-left : 0 ; border-radius : 0 7 px 7 px 0 ; padding : 8 px 11 px }. date-field . native-date { position : absolute ; width : 1 px ; height : 1 px ; padding : 0 ; border : 0 ; opacity : 0 ; bottom : 0 ; right : 0 ; pointer-events : none }. holiday-group > summary { display : flex ; align-items : center ; gap : 10 px ; cursor : pointer ; padding : 17 px 0 ; font-weight : 600 ; list-style : none }. holiday-group > summary :: before { content : '▸' ; color : var ( -- muted )}. holiday-group [ open ]> summary :: before { content : '▾' }. holiday-group > summary . badge { margin-left : auto }. absence-range { padding : 0 14 px 12 px ; border : 1 px solid var ( -- line ); border-radius : 8 px ; margin : 14 px 0 }. absence-preview { border-top : 1 px solid var ( -- line ); margin-top : 22 px ; padding-top : 8 px }. impact-scroll { overflow-x : auto }. impact-table { width : 100 % ; border-collapse : collapse ; font-size : 12 px }. impact-table th { text-align : left ; color : var ( -- muted ); font-weight : 500 }. impact-table td , . impact-table th { padding : 12 px 8 px ; border-bottom : 1 px solid var ( -- line ); vertical-align : top }. impact-table small { display : block ; font-size : 10 px ; line-height : 1.6 ; margin-top : 5 px }. impact-table td : first-child { min-width : 160 px }. impact-table td { overflow-wrap : anywhere }. preview-count { font-size : 12 px ; color : var ( -- green )}
/* Typed workspace data and generation preview. */
. wide-modal { width : 100 % ; max-width : 1000 px }. generation-toolbar { display : flex ; align-items : center ; gap : 12 px ; margin-bottom : 18 px ; flex-wrap : wrap }. generation-toolbar . info-note { flex-basis : 45 % ; margin : 0 }. generation-panel { padding : 22 px ; min-width : 0 }. generation-panel . section-line { margin-top : 0 }. generation-panel > p { font-size : 12 px ; line-height : 1.6 }. generation-columns { align-items : start }. variable-card { display : flex ; align-items : center ; gap : 7 px ; padding : 16 px 0 ; border-top : 1 px solid var ( -- line ); font-size : 13 px }. variable-card . grow { min-width : 0 ; overflow-wrap : anywhere }. variable-card small { display : block ; margin-top : 6 px ; color : var ( -- muted ); font-size : 10 px }. variable-card button { font-size : 10 px ; padding : 7 px }. generation-preview { margin-top : 18 px }. data-tree { border : 1 px solid var ( -- line ); border-radius : 8 px ; overflow : hidden }. data-row { display : grid ; grid-template-columns : minmax ( 80 px , 1 fr ) 130 px minmax ( 180 px , 2 fr ) 92 px ; gap : 8 px ; align-items : center ; padding : 10 px ; border-bottom : 1 px solid var ( -- line ); background : #fafcf9 }. data-row input , . data-row select { min-width : 0 ; width : 100 % ; font-size : 12 px }. data-key { font-size : 12 px ; color : var ( -- muted )}. data-value { min-width : 0 }. data-depth-1 { padding-left : 24 px }. data-depth-2 { padding-left : 40 px }. data-depth-3 , . data-depth-4 , . data-depth-5 , . data-depth-6 , . data-depth-7 , . data-depth-8 { padding-left : 56 px }. data-actions { display : flex ; gap : 3 px }. data-actions button { padding : 5 px }. data-value . actions { margin : 0 ; flex-wrap : wrap }. data-value . actions button { padding : 7 px ; font-size : 11 px }. person-value { display : grid ; gap : 7 px }. bulk-editor , . binding-editor { background : #edf5ef ; border : 1 px solid #c9dfce ; border-radius : 10 px ; padding : 18 px ; margin : 18 px 0 }. bulk-editor h3 , . binding-editor h3 { font-size : 15 px }. bulk-editor textarea { width : 100 % }. binding-button { text-align : left ; width : 100 % ; color : #34744f ; background : #f0f7f1 ; border-color : #d6e6d8 ; overflow-wrap : anywhere ; line-height : 1.5 ; min-width : 0 }. binding-grid { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 0 18 px }. binding-grid label { min-width : 0 }. generation-block { border : 1 px solid var ( -- line ); border-radius : 10 px ; padding : 18 px ; margin : 18 px 0 }. iteration-row , . generation-step { display : flex ; gap : 8 px ; align-items : center ; margin : 13 px 0 }. iteration-row >* { min-width : 0 }. iteration-row > input { max-width : 150 px }. generation-step { flex-wrap : wrap }. generation-step . binding-button { width : auto }. generation-step . grow { flex : 1 }. generation-step select { font-size : 11 px ; max-width : 180 px }. generation-step . check { margin : 0 }. binding-source { padding : 0 4 px }. binding-key { margin : 14 px 0 0 16 px ; padding-left : 16 px ; border-left : 2 px solid #b5d2be }. priority-person { margin : 14 px 0 }. demo-note dl { margin : 8 px 0 }. demo-note dl > div { display : flex ; gap : 12 px }. demo-note dt { min-width : 34 px ; font-weight : 600 }. demo-note dd { margin : 0 }. demo-note { font-size : 11 px ; line-height : 1.8 }
@ media ( max-width : 900px ) {. generation-columns { grid-template-columns : 1 fr }. data-row { grid-template-columns : 80 px 110 px minmax ( 100 px , 1 fr )}. data-actions { grid-column : 3 ; justify-content : flex-end }. iteration-row { flex-wrap : wrap }. iteration-row . binding-button { flex-basis : 100 % }}
@ media ( max-width : 700px ) {. wide-modal . two-columns , . binding-grid { grid-template-columns : 1 fr }. data-row { grid-template-columns : 1 fr 1 fr ; padding : 12 px }. data-value { grid-column : 1 /- 1 }. data-actions { grid-column : 2 }. data-depth-1 { border-left : 8 px solid #e6eee8 }. data-depth-2 , . data-depth-3 { border-left : 16 px solid #e6eee8 }. generation-toolbar > button { flex : 1 }. generation-block { padding : 12 px }. generation-panel { padding : 15 px }. variable-card { flex-wrap : wrap }. variable-card . grow { flex-basis : 50 % }. binding-key { margin-left : 5 px ; padding-left : 10 px }. sidebar nav : is ( button , a ) { padding : 6 px }. sidebar . nav-icon { font-size : 18 px ; width : 17 px }}
. demo-banner { position : sticky ; top : 0 ; z-index : 40 ; background : #fff4d9 ; border-bottom : 1 px solid #dfc68e ; padding : 10 px 22 px ; color : #725624 ; font-size : 11 px ; line-height : 1.6 }. demo-banner > div { display : flex ; gap : 8 px 20 px ; flex-wrap : wrap }. demo-banner strong { font-weight : 700 }. demo-protection { margin : 5 px 0 0 ; border-left : 3 px solid #b36040 ; padding-left : 10 px ; color : #8a4229 }. demo-mode . sidebar { top : var ( -- demo - offset , 0 px ); height : calc ( 100 dvh - var ( -- demo - offset , 0 px ))}@ media ( max-width : 700px ) {. demo-banner { padding : 8 px 12 px ; font-size : 10 px }. demo-banner > div { gap : 3 px 10 px }. demo-mode . sidebar { height : auto }}
@ media ( min-width : 701px ) {. sidebar { overflow-y : auto }. sidebar-bottom { padding-top : 20 px }}
/* Daily collaboration has one primary action; setup is a separate destination. */
. sr-only { position : absolute ; width : 1 px ; height : 1 px ; clip-path : inset ( 50 % ); overflow : hidden ; white-space : nowrap }. sidebar nav . setup-toggle { margin-top : 20 px ; border-top : 1 px solid var ( -- line ); border-radius : 0 ; padding-top : 20 px }. setup-nav { padding-left : 20 px ; border-left : 1 px solid var ( -- line ); margin-left : 20 px }. sidebar nav . setup-nav : is ( button , a ) { width : 100 % ; padding : 10 px ; font-size : 12 px }. daily-overview { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 20 px ; margin-bottom : 24 px }. today-card { background : white ; border : 1 px solid var ( -- line ); padding : 20 px 22 px ; border-radius : 12 px ; display : flex ; flex-direction : column ; gap : 13 px }. today-card . person-line small , . today-card > small { display : block ; margin-top : 5 px ; line-height : 1.6 }. attention-panel { background : #fff ; border : 1 px solid #bdd8cb ; border-radius : 12 px ; padding : 0 20 px ; margin-bottom : 24 px }. reply-row { display : flex ; align-items : center ; gap : 14 px ; padding : 18 px 0 ; border-top : 1 px solid var ( -- line )}. reply-row small { display : block ; margin : 7 px 0 ; line-height : 1.6 }. reply-row p { margin : 8 px 0 0 }. reply-row . actions { flex-shrink : 0 ; margin : 0 }. waiting-line { display : flex ; align-items : center ; gap : 15 px ; margin-bottom : 18 px ; font-size : 12 px ; color : var ( -- muted )}. action-comment { font-size : 13 px ; border-left : 2 px solid #cadbce ; padding-left : 10 px ; overflow-wrap : anywhere }. page-heading . actions { margin : 0 }. schedule-control { position : relative }. schedule-trigger { min-width : 180 px ; display : flex ; justify-content : space-between ; gap : 12 px ; font-weight : 600 }. schedule-picker { position : absolute ; right : 0 ; top : 45 px ; width : 280 px ; padding : 12 px ; background : white ; box-shadow : 0 8 px 28 px #142a28 25 ; border : 1 px solid var ( -- line ); border-radius : 10 px ; z-index : 15 }. schedule-picker input { width : 100 % }. schedule-results { max-height : 240 px ; overflow : auto ; margin-top : 8 px }. schedule-results button { width : 100 % ; display : block ; text-align : left ; border : 0 ; padding : 12 px }. chosen { background : #e6f2eb !important ; border-color : #548b6b !important ; color : #19513a !important }. day { transition : background .15 s , box-shadow .15 s }. day : hover { background : #edf5ef ; box-shadow : inset 0 0 0 1 px #b5cebc }. shift-ticket { background : #f3f7f4 ; border : 1 px solid #dce6df ; border-radius : 12 px ; padding : 18 px ; margin : 16 px 0 22 px }. shift-ticket . person-line . badge { margin-left : auto }. shift-times { display : flex ; align-items : center ; justify-content : space-between ; gap : 10 px ; margin-top : 20 px ; padding-top : 15 px ; border-top : 1 px solid #dde7e0 }. shift-times strong { display : block ; font-size : 12 px ; margin-top : 6 px }. shift-times > span { color : #85968a }. cover-self { display : flex ; align-items : center ; gap : 12 px ; margin : 18 px 0 ; flex-wrap : wrap }. cover-options { display : flex ; gap : 8 px ; flex-wrap : wrap ; max-height : 190 px ; overflow : auto }. cover-options button { display : flex ; align-items : center ; gap : 8 px ; padding : 10 px 13 px }. selection-tick { color : var ( -- green ); font-weight : bold }. range-options { margin : 20 px 0 ; border-top : 1 px solid var ( -- line ); border-bottom : 1 px solid var ( -- line ); padding : 5 px 0 }. range-options > summary { padding : 8 px 0 ; font-weight : 500 }. request-ready { font-size : 12 px ; background : #f0f7f1 ; padding : 12 px ; border-radius : 8 px ; line-height : 1.6 }. request-ready small { display : block ; margin-bottom : 6 px ; font-size : 10 px }. cover-footer { flex-wrap : wrap ; gap : 8 px }. cover-footer . primary { margin-left : auto }. force-action { color : #82633e ; font-size : 11 px }. shift-option { display : flex ; flex-direction : column ; gap : 10 px ; width : 100 % ; text-align : left ; margin : 12 px 0 }. simple-list-row { display : flex ; gap : 8 px ; align-items : center ; margin : 12 px 0 }. simple-list-row input { flex : 1 ; min-width : 0 }. simple-list-row button { padding : 6 px 9 px }. matrix-head , . matrix-row { display : grid ; grid-template-columns : 150 px 1 fr 24 px ; gap : 14 px ; align-items : center }. matrix-head { font-size : 11 px ; color : var ( -- muted ); padding : 12 px 0 }. matrix-row { padding : 16 px 0 ; border-top : 1 px solid var ( -- line )}. matrix-row input { width : 100 % ; min-width : 0 }. matrix-people { display : flex ; gap : 8 px ; align-items : center ; flex-wrap : wrap }. matrix-person { display : flex ; align-items : center ; gap : 7 px ; border-radius : 7 px ; background : #edf4ef ; padding : 7 px 9 px ; font-size : 12 px }. matrix-person b { color : #84978a ; font-weight : 500 ; font-size : 10 px }. matrix-person button { padding : 0 3 px ; background : none ; border : 0 ; color : #75917d }. inline-people { background : #f3f7f4 ; border-radius : 10 px ; padding : 16 px ; margin : 16 px 0 }. inline-people input { width : 100 % ;
@media(max-width:950px) and (min-width:701px){.sidebar .setup-nav{position:fixed;left:74px;top:calc(var(--demo-offset,0px) + 240px);background:white;box-shadow:0 6px 20px #20392c25;padding:12px;margin:0;width:210px;border-radius:8px;z-index:20}.sidebar nav .setup-toggle{justify-content:center}}
@media(max-width:700px){.sidebar nav .setup-toggle{margin:0;border:0;padding:8px}.sidebar .setup-nav{position:absolute;right:10px;top:55px;width:220px;padding:12px;margin:0;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 25px #1f372925}.sidebar nav .setup-nav :is(button,a){display:block;text-align:left;padding:12px}.sidebar nav>button span:not(.nav-icon){display:none}.daily-overview{grid-template-columns:1fr;gap:10px}.today-card{padding:16px}.reply-row{flex-wrap:wrap;align-items:flex-start}.reply-row>.grow{width:calc(100% - 60px)}.reply-row>.actions{margin-left:50px}.attention-panel{padding:0 14px}.shift-times{align-items:flex-start;flex-direction:column;gap:10px}.shift-times>span{display:none}.shift-times>div{display:flex;justify-content:space-between;gap:10px;width:100%}.shift-times strong{margin:0}.cover-footer .force-action{order:3;width:100%;border:0}.cover-footer .primary{flex:1}.modal-footer{bottom:-20px}.schedule-picker{left:0;right:auto;width:min(280px,calc(100vw - 55px))}.matrix-head{display:none}.matrix-row{grid-template-columns:1fr 24px;gap:10px}.matrix-people{grid-column:1/-1;grid-row:2}.matrix-row>button{grid-column:2;grid-row:1}.simple-list-row{gap:4px}.simple-list-row button{padding:5px}.simple-list-row .step-number{display:none}.top-actions>.text,.top-actions>button{font-size:10px}.cover-options button{font-size:12px}.cover-sheet .two-columns{grid-template-columns:1fr}.day-clock{display:none}.day{min-height:85px}}
.shift-ticket .person-line small{ display : block ; margin-top : 5 px }. request-ready > span { display : block ; font-weight : 500 ; color : var ( -- green )}
. sidebar nav a { text-decoration : none ; border-radius : 7 px }. sidebar nav a : focus-visible { outline : 2 px solid #4f9d7e ; outline-offset : 2 px }. setup-section { scroll-margin-top : 150 px ; margin-bottom : 38 px }. generated-group { border-top : 1 px dashed #baccc2 ; margin-top : 24 px ; padding-top : 18 px }. generated-group > h3 { font-size : 12 px ; color : var ( -- muted ); font-weight : 500 }. generated-resource { background : #f3f6f5 ; box-shadow : none }. manual-resource { border-left : 3 px solid #59977c }. resource-origin { display : block ; font-size : 10 px ; color : #667b70 ; margin-bottom : 10 px }
. recipe-section { border-top : 1 px solid var ( -- line ); margin-top : 18 px ; padding-top : 18 px }. recipe-section h3 { display : flex ; align-items : center ; gap : 10 px ; font-size : 15 px }. recipe-number { display : inline-flex ; width : 25 px ; height : 25 px ; align-items : center ; justify-content : center ; background : #e3eee8 ; color : #236648 ; border-radius : 50 % ; font-size : 12 px }. advanced-rule { font-size : 12 px ; color : #687e71 ; margin : 12 px 0 }. advanced-rule summary { cursor : pointer }. recipe-field { min-width : 0 }. recipe-field > label { margin : 12 px 0 6 px }. recipe-field > select , . recipe-field . inline-value { width : 100 % }. recipe-field . inline-value { margin-top : 7 px }. binding-tweak { font-size : 11 px !important }. recipe-example { background : #f3f7f4 ; border-radius : 9 px ; padding : 16 px }. recipe-example table { width : 100 % ; font-size : 12 px ; border-collapse : collapse ; text-align : left }. recipe-example td , . recipe-example th { padding : 9 px 8 px ; border-bottom : 1 px solid var ( -- line )}
. coverage-problems { border-color : #e5c9a8 ; background : #fffbf5 }. coverage-issue-list { max-height : 230 px ; overflow : auto }
. setup-jumps { display : flex ; flex-wrap : wrap ; gap : 8 px ; margin : 0 0 20 px }. setup-jumps a { padding : 8 px 12 px ; border : 1 px solid var ( -- line ); border-radius : 6 px ; color : var ( -- green ); text-decoration : none ; font-size : 12 px ; background : white }
. recipe-number { flex-shrink : 0 }. rule-identity { grid-template-columns : minmax ( 0 , 1 fr ) auto !important ; align-items : end }. rule-identity . check { margin-bottom : 25 px }@ media ( max-width : 640px ) {. recipe-section > . section-line { flex-direction : column ; align-items : stretch ; gap : 4 px }. recipe-section > . section-line > select { width : 100 % }. recipe-section h3 { margin : 0 0 12 px }. recipe-section { margin-top : 12 px ; padding-top : 14 px }. rule-identity { gap : 12 px !important }}
. cover-range { margin-top : 18 px ; padding-top : 14 px ; border-top : 1 px solid var ( -- line )}. cover-boundary { display : grid ; grid-template-columns : minmax ( 0 , 1 fr ) 130 px ; gap : 14 px }. cover-boundary label { margin : 10 px 0 }. cover-boundary input { min-width : 0 ; width : 100 % }. modal-footer { flex-wrap : wrap }. generation-live-status { flex-basis : 100 % ; width : 100 % ; padding : 10 px 12 px ; border-radius : 7 px ; background : #edf5ef ; font-size : 12 px }. generation-live-status . has-errors { background : #fff0ed ; color : #913d32 ; border : 1 px solid #e9beb5 }. validation-status-line { display : flex ; align-items : center ; justify-content : space-between ; gap : 10 px }. validation-status-line button { font-size : 11 px ; padding : 5 px 8 px }. validation-first { margin : 6 px 0 0 ; line-height : 1.4 ; overflow-wrap : anywhere }. generation-live-errors { max-height : 150 px ; overflow : auto }. generation-live-errors p { line-height : 1.4 ; overflow-wrap : anywhere }. generation-live-status . validation-first { display : -webkit- box ; -webkit- line-clamp : 2 ; -webkit- box-orient : vertical ; overflow : hidden }@ media ( max-width : 500px ) {. cover-boundary { grid-template-columns : minmax ( 0 , 1 fr ) 110 px ; gap : 10 px }. generation-live-errors { max-height : 100 px }}
. recipe-field > div > select { width : 100 % }. name-composer { display : flex ; align-items : center ; min-width : 0 ; border : 1 px solid #d8e1da ; border-radius : 7 px ; background : white ; overflow : hidden }. name-composer : focus-within { outline : 2 px solid #4f9d7e ; outline-offset : 2 px }. recipe-field . name-composer > select { flex : 0 1 46 % ; width : 46 % ; min-width : 0 ; border : 0 ; border-right : 1 px solid #d8e1da ; border-radius : 0 ; background : white ; padding : 11 px 8 px ; text-overflow : ellipsis }. recipe-field . name-composer > . inline-value { flex : 1 1 54 % ; width : 54 % ; min-width : 0 ; margin : 0 ; border : 0 ; border-radius : 0 ; padding : 11 px 8 px }. name-composer > input : focus , . name-composer > select : focus { outline : none }. name-composer > . name-prefix { flex : 0 1 25 % ; width : 25 % ; min-width : 0 ; border : 0 ; border-radius : 0 ; padding : 11 px 6 px }
. binding-value-preview { margin : 16 px 0 ; padding : 12 px ; background : #f3f7f4 ; border : 1 px solid var ( -- line ); border-radius : 8 px ; min-width : 0 }. binding-value-preview . section-line { margin : 0 0 8 px ; gap : 8 px ; flex-wrap : wrap }. binding-value-preview strong { font-size : 12 px }. binding-value-preview small { font-size : 11 px ; color : #65796d ; overflow-wrap : anywhere }. binding-value-preview textarea { display : block ; width : 100 % ; box-sizing : border-box ; height : 116 px ; min-height : 80 px ; max-height : 240 px ; resize : vertical ; overflow : auto ; white-space : pre ; font : 12 px / 1.5 Consolas , "Courier New" , monospace ; background : #fff ; color : #244332 ; margin : 0 ; padding : 10 px }. binding-value-preview . validation-warning { margin-bottom : 0 }
. template-token { font-family : Consolas , "Courier New" , monospace !important ; font-size : 12 px ; letter-spacing : 0 ; font-weight : 500 ; color : #285c48 ; background : #edf5f0 ; border-radius : 5 px }. binding-template { display : block ; padding : 8 px 10 px ; overflow-wrap : anywhere ; margin : 12 px 0 }. route-heading . template-token { padding : 5 px 8 px }
/* Schedule setup: sources and review, contiguous resources, occasional calendar maintenance. */
# generation . setup-intro { margin : 24 px 0 18 px }# generation . setup-intro h2 { font-size : 20 px ; margin-bottom : 6 px }# generation . setup-intro p { margin : 0 }# generation . generation-columns { grid-template-columns : minmax ( 0 , .85 fr ) minmax ( 0 , 1.35 fr ); gap : 18 px ; align-items : start }# generation . generation-panel { padding : 20 px }# generation . variable-card { gap : 8 px ; padding : 12 px 0 }# generation . variable-card . grow { min-width : 0 }# generation . variable-card strong { overflow-wrap : anywhere }# generation . variable-card button { padding : 7 px 9 px ; font-size : 11 px }# generation . section-line { margin-top : 0 }. generation-review-bar { margin-top : 18 px ; border : 1 px solid var ( -- line ); border-radius : 9 px ; background : #fff }. generation-review > summary { display : flex ; align-items : center ; justify-content : space-between ; gap : 16 px ; cursor : pointer ; padding : 15 px 18 px ; font-size : 13 px ; list-style : disclosure-closed }. generation-review . review-status { font-size : 12 px }. generation-review [ open ]> summary { border-bottom : 1 px solid var ( -- line )}. review-body { padding : 16 px 18 px }. review-body . generation-preview > h3 { display : none }. review-actions { border-top : 1 px solid var ( -- line ); padding : 12 px 18 px ; justify-content : flex-end }. setup-resources { margin-top : 32 px ; padding-top : 24 px ; border-top : 1 px solid var ( -- line )}. setup-resources > . section-line { margin-top : 0 }. section-count { font-size : 12 px ; color : var ( -- muted ); font-weight : 400 ; margin-left : 10 px }. setup-resources . rule-card { padding : 18 px }. setup-resources . rule-card h2 { font-size : 16 px }. setup-resources . generated-group { margin-top : 18 px ; padding-top : 16 px }. setup-resources . generated-group > h3 { font-size : 11 px ; color : var ( -- muted ); letter-spacing : .5 px }. setup-resources . escalation-flow { margin : 12 px 0 }. setup-availability { margin-top : 32 px ; padding-top : 24 px ; border-top : 1 px solid var ( -- line )}. setup-utilities { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 18 px ; align-items : start }. setup-widget { background : #fff ; border : 1 px solid var ( -- line ); border-radius : 9 px ; padding : 16 px 18 px ; min-width : 0 }. widget-heading { display : flex ; gap : 10 px ; align-items : center }. widget-heading h3 { font-size : 14 px ; margin : 0 }. widget-heading button { margin-left : auto }. setup-widget > p { font-size : 12 px ; margin : 12 px 0 0 }. holiday-widget > summary { display : flex ; align-items : center ; gap : 10 px ; cursor : pointer ; font-weight : 600 ; flex-wrap : wrap }. holiday-widget > summary : before , . absence-widget-list > summary : before { content : '› ; font-size : 20 px ; color : var ( -- muted )}. holiday-widget [ open ]> summary : before , . absence-widget-list [ open ]> summary : before { transform : rotate ( 90 deg )}. holiday-widget > summary small { width : 100 % ; font-weight : 400 ; padding-left : 18 px }. widget-body { margin-top : 16 px }. widget-scroll { max-height : 360 px ; overflow : auto }. absence-widget-list > summary { display : flex ; align-items : center ; gap : 8 px ; cursor : pointer ; margin-top : 8 px ; font-size : 12 px }. setup-widget . holiday-group { margin : 10 px 0 0 }. setup-widget . list-row { padding : 10 px 0 }. setup-widget . list-row strong { font-size : 12 px }. setup-widget . badge { font-size : 11 px }. setup-widget . actions button { font-size : 12 px }. setup-jumps a { background : white }. setup-jumps a : hover { border-color : #8eb5a2 }
@ media ( max-width : 1050px ) {# generation . generation-columns { grid-template-columns : 1 fr }}@ media ( max-width : 650px ) {. setup-utilities { grid-template-columns : 1 fr }. generation-review > summary { align-items : flex-start ; flex-direction : column ; gap : 6 px }. review-actions { flex-wrap : wrap }. setup-resources > . section-line { align-items : flex-start ; gap : 12 px ; flex-direction : column }. setup-resources > . section-line . actions { flex-wrap : wrap }# generation . generation-panel { padding : 16 px }. setup-widget { padding : 14 px }. variable-card { flex-wrap : wrap }}
. resource-summary { display : flex ; align-items : center ; justify-content : space-between ; gap : 14 px ; cursor : pointer ; list-style : none }. resource-summary > div { min-width : 0 }. resource-summary h2 { margin : 5 px 0 0 ; overflow-wrap : anywhere }. resource-summary . resource-origin { display : block ; margin-bottom : 6 px }. resource-summary . eyebrow { display : block }. resource-summary > button { font-size : 11 px ; flex-shrink : 0 }. resource-summary : before { content : '› ; color : var ( -- muted ); font-size : 22 px }. resource-disclosure [ open ]> . resource-summary : before { transform : rotate ( 90 deg )}. resource-summary > div { flex : 1 }. resource-body { margin-top : 16 px }. setup-resources . card-grid { align-items : start }. setup-resources . resource-disclosure : not ([ open ]) { padding-top : 14 px ; padding-bottom : 14 px }@ media ( max-width : 500px ) {. resource-summary { gap : 8 px }. resource-summary > button { max-width : 100 px ; white-space : normal }}
/* Compact setup utilities and a shared resource inventory. */
# availability . setup-availability { margin : 0 0 20 px ; padding : 0 ; border : 0 }. setup-utilities { display : flex ; gap : 10 px ; align-items : flex-start ; flex-wrap : wrap }. setup-utilities . setup-widget { padding : 0 ; flex : 0 1 auto ; min-width : 180 px }. setup-widget > summary { display : flex ; align-items : center ; gap : 10 px ; padding : 10 px 14 px ; cursor : pointer ; font-size : 12 px ; list-style : none }. setup-widget > summary : before { content : '› ; font-size : 17 px ; color : var ( -- muted )}. setup-widget [ open ]> summary : before { transform : rotate ( 90 deg )}. setup-widget [ open ] { flex-basis : 420 px }. setup-widget . widget-body { padding : 0 14 px 14 px ; margin-top : 8 px }. setup-widget . badge { margin-left : auto }. setup-widget . widget-scroll { max-height : 280 px }
# generation . setup-intro { margin : 0 0 14 px }# generation . setup-intro h2 { font-size : 16 px }# generation . setup-intro p { display : none }# generation . generation-panel { padding : 16 px }# generation . generation-columns { gap : 12 px }. generation-review-bar { display : grid ; grid-template-columns : minmax ( 0 , 1 fr ) auto ; align-items : center ; margin-top : 12 px }. generation-review > summary { justify-content : flex-start ; gap : 12 px ; padding : 13 px 14 px ; min-height : 48 px ; font-size : 12 px }. generation-review > summary : before { content : '› ; font-size : 18 px }. generation-review [ open ]> summary : before { transform : rotate ( 90 deg )}. generation-review . review-status { font-size : 11 px }. review-actions { border : 0 ; padding : 8 px ; gap : 6 px }. review-actions button { font-size : 11 px ; padding : 7 px 9 px }. generation-review-bar : has ( . generation-review [ open ]) { grid-template-columns : 1 fr }. generation-review-bar : has ( . generation-review [ open ]) . review-actions { border-top : 1 px solid var ( -- line )}
. resource-inventory { margin-top : 24 px }. resource-inventory > . section-line { margin : 0 0 12 px }. resource-create { gap : 7 px }. resource-create button , . schedule-create > summary { font-size : 12 px ; padding : 8 px 11 px }. schedule-create { position : relative }. schedule-create > summary { cursor : pointer ; border : 1 px solid #dbe3de ; border-radius : 7 px ; background : #fff ; list-style : none }. schedule-create-options { position : absolute ; right : 0 ; top : calc ( 100 % + 5 px ); min-width : 220 px ; padding : 5 px ; border : 1 px solid var ( -- line ); border-radius : 8 px ; background : white ; box-shadow : 0 8 px 24 px #233d35 1 a ; z-index : 5 ; display : grid ; gap : 3 px }. schedule-create-options button { border : 0 ; text-align : left }
. resource-table { border : 1 px solid var ( -- line ); border-radius : 9 px ; overflow : hidden ; background : white }. resource-table . resource-group { margin : 0 ; padding : 0 ; border : 0 }. resource-table . generated-group { border-top : 2 px solid #d6dfe8 }. resource-group-label { margin : 0 ; padding : 10 px 15 px ; font-size : 11 px ; color : var ( -- muted ); font-weight : 500 ; background : #f7f9f8 }. resource-table . generated-group . resource-group-label { background : #eef2f8 ; color : #63768e }. resource-table . resource-row { margin : 0 ; padding : 0 ; border : 0 ; border-top : 1 px solid var ( -- line ); border-radius : 0 ; box-shadow : none }. resource-table . manual-resource { background : white ; border-left : 3 px solid #59977c }. resource-table . generated-resource { background : #f7f9fc ; color : #3e5069 ; border-left : 3 px solid #aabbd3 }. resource-table . resource-summary { display : grid ; grid-template-columns : 12 px 105 px minmax ( 0 , 1 fr ) 20 px ; gap : 12 px ; padding : 12 px 15 px ; min-height : 47 px }. resource-table . resource-summary : hover { background : #edf2f5 66 }. resource-table . resource-summary : before { font-size : 19 px }. resource-kind { font-size : 11 px ; color : var ( -- muted )}. resource-name { font-size : 13 px ; font-weight : 500 ; overflow-wrap : anywhere }. generated-mark { font-size : 17 px ; color : #7b8fab }. resource-table . resource-body { border-top : 1 px solid var ( -- line ); margin : 0 ; padding : 16 px 30 px 18 px 42 px ; font-size : 12 px }. resource-table . resource-body > p : last-child { margin-bottom : 0 }. resource-table . escalation-flow { margin-top : 0 }. resource-table . routing-list { display : block }. resource-table . route-heading { margin-bottom : 12 px }. resource-table . route-flow { margin : 0 }. resource-table . route-position { font-size : 10 px ; padding : 2 px 5 px ; margin-right : 6 px }. resource-table . route-dragging { opacity : .5 }. resource-table . drop-before { border-top : 2 px solid var ( -- green )}. resource-table . drop-after { border-bottom : 2 px solid var ( -- green )}
@ media ( max-width : 700px ) {. resource-inventory > . section-line { align-items : flex-start ; flex-direction : column ; gap : 10 px }. resource-create { flex-wrap : wrap }. resource-create button , . schedule-create > summary { font-size : 11 px ; padding : 8 px }. generation-review-bar { grid-template-columns : 1 fr }. generation-review > summary { flex-direction : row ; align-items : center ; flex-wrap : wrap }. review-actions { justify-content : flex-start ; padding-top : 0 }. resource-table . resource-summary { grid-template-columns : 10 px 75 px minmax ( 0 , 1 fr ) 15 px ; gap : 7 px ; padding : 11 px 9 px }. resource-kind { font-size : 10 px }. resource-name { font-size : 12 px }. resource-table . resource-body { padding : 14 px }. setup-utilities . setup-widget { min-width : 0 ; flex : 1 }. setup-utilities . setup-widget [ open ] { flex-basis : 100 % }. schedule-create-options { left : 0 ; right : auto }}
. generation-review-bar . review-actions { margin : 0 }
. resource-table . resource-summary . resource-title { min-width : 0 }. resource-title . resource-name { display : block }. resource-brief { display : block ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; margin-top : 5 px ; font-size : 11 px ; font-weight : 400 ; color : #77857e }. resource-source { display : flex ; justify-content : flex-end ; margin : -5 px 0 12 px }. source-rule-link { font-size : 11 px ; padding : 5 px 8 px ; border : 1 px solid #d8e2ed ; background : #f1f5fa ; color : #526e90 ; max-width : 100 % ; text-align : right ; overflow-wrap : anywhere }. source-rule-link : disabled { opacity : 1 ; cursor : default }. resource-table . resource-summary : has ( . resource-title ) { align-items : start }. resource-table . resource-summary > . resource-kind { padding-top : 2 px }@ media ( max-width : 700px ) {. resource-brief { white-space : normal ; display : -webkit- box ; -webkit- line-clamp : 2 ; -webkit- box-orient : vertical }. resource-source { margin-top : 0 }}
. form-validation { width : 100 % ; flex-basis : 100 % }. validation-control { width : 100 % ; font-size : 12 px }. validation-toggle { width : 100 % ; display : flex ; align-items : center ; justify-content : space-between ; gap : 12 px ; background : #f4f6f5 ; font-size : 12 px }. validation-toggle . is-checked { background : #edf5ef ; color : #27684b }. validation-toggle . has-errors { background : #fff0ed ; border-color : #e9beb5 ; color : #913d32 }. validation-toggle . is-checking { opacity : .8 }. validation-details { max-height : 230 px ; overflow : auto ; padding : 8 px 12 px ; border : 1 px solid var ( -- line ); border-top : 0 ; background : white }. validation-issue { padding : 10 px 0 ; border-bottom : 1 px solid var ( -- line ); overflow-wrap : anywhere }. validation-issue > strong , . validation-issue > small { display : block ; margin-bottom : 5 px }. validation-issue . actions { margin : 6 px 0 0 ; flex-wrap : wrap }. validation-issue button { font-size : 11 px ; padding : 5 px 8 px }. page-validation { position : sticky ; top : 70 px ; z-index : 4 ; margin-top : 12 px }. generation-block { scroll-margin-top : 16 px }@ media ( max-width : 700px ) {. validation-details { max-height : 160 px }. page-validation { top : 150 px }}
. absence-range . absence-zone { display : block ; margin : 8 px 0 }. absence-range . two-columns { align-items : start }. absence-range input [ type = time ] { width : 100 % }. impact-table . impact-interval { min-width : 180 px }. impact-interval > strong { display : block ; margin-bottom : 6 px ; overflow-wrap : anywhere }. impact-interval > small { display : flex ; flex-direction : column ; gap : 3 px ; line-height : 1.5 ; white-space : normal }. absence-range select { min-width : 0 ; width : 100 % }
. coverage-problems . panel { padding : 20 px ; margin : 20 px 0 26 px ; border : 1 px solid #e5c9a8 ; border-radius : 10 px }
. coverage-problems > p { margin-bottom : 16 px }. coverage-issue-list { display : flex ; flex-direction : column ; gap : 12 px ; max-height : 320 px }
. coverage-issue { display : flex ; align-items : center ; justify-content : space-between ; gap : 18 px ; padding : 14 px 16 px ; border : 1 px solid #ebc9c2 ; border-radius : 8 px ; background : #fff8f6 }
. coverage-issue . is-pending { background : #fffdf7 ; border-color : #e5dcc0 }. coverage-issue-body { display : flex ; flex-direction : column ; gap : 8 px ; min-width : 0 ; overflow-wrap : anywhere }
. coverage-state { font-size : 12 px ; font-weight : 600 ; color : #9a4436 }. is-pending . coverage-state { color : #806221 }. coverage-times { display : flex ; flex-wrap : wrap ; gap : 6 px ; line-height : 1.6 }. coverage-issue > button { flex-shrink : 0 }
@ media ( max-width : 640px ) {. coverage-problems . panel { padding : 16 px }. coverage-issue { align-items : stretch ; flex-direction : column ; padding : 12 px }. coverage-times { flex-direction : column ; gap : 3 px }}
# generation . generation-columns { grid-template-columns : minmax ( 0 , .9 fr ) minmax ( 0 , 1.15 fr ) minmax ( 0 , .85 fr ); gap : 16 px ; align-items : start }
# generation . generation-panel { padding : 18 px ; min-width : 0 }# generation . generation-panel > . section-line { flex-wrap : wrap ; gap : 10 px }# generation . generation-panel h2 { font-size : 15 px }
# generation . variable-card { flex-wrap : wrap ; gap : 6 px }# generation . variable-card > . grow { flex : 1 0 100 % ; min-width : 0 }# generation . variable-card button { font-size : 11 px ; padding : 6 px 8 px }
# generation # availability { margin : 0 ; min-width : 0 }# availability . setup-utilities { display : flex ; flex-direction : column ; gap : 16 px }# availability . setup-widget { width : 100 % ; min-width : 0 ; padding : 16 px ; flex : none }
# availability . widget-heading { font-size : 14 px ; font-weight : 600 }# availability . widget-body { padding : 0 ; margin-top : 12 px }# availability . widget-scroll { max-height : 240 px ; overflow : auto ; overscroll-behavior : contain ; scrollbar-gutter : stable }
# availability . actions { flex-wrap : wrap ; gap : 8 px ; margin-top : 0 ; margin-bottom : 12 px }# availability . list-row { gap : 8 px ; align-items : flex-start }# availability . list-row > div { min-width : 0 ; flex : 1 }# availability . list-row small { display : block ; margin-top : 5 px ; line-height : 1.5 }# availability . list-row button { font-size : 11 px ; padding : 5 px 0 }
# availability . holiday-group > summary { display : flex ; gap : 8 px ; align-items : center ; padding : 8 px 0 ; font-size : 12 px ; cursor : pointer }
@ media ( max-width : 1200px ) {# generation . generation-columns { grid-template-columns : minmax ( 0 , 1 fr ) minmax ( 0 , 1 fr )}# generation # availability { grid-column : 1 /- 1 }# availability . setup-utilities { display : grid ; grid-template-columns : 1 fr 1 fr }}
@ media ( max-width : 700px ) {# generation . generation-columns { grid-template-columns : minmax ( 0 , 1 fr )}# availability . setup-utilities { grid-template-columns : minmax ( 0 , 1 fr )}}
# generation . variable-card . grow > small { display : block ; white-space : normal ; overflow-wrap : anywhere ; line-height : 1.5 }
. workspace-variable-list , . generation-rule-list { max-height : 360 px ; overflow : auto ; overscroll-behavior : contain ; scrollbar-gutter : stable ; padding-right : 4 px }. workspace-variable-list : focus-visible , . generation-rule-list : focus-visible { outline : 2 px solid #4f9d7e ; outline-offset : 3 px ; border-radius : 4 px }
. resource-inventory { padding : 20 px ; background : #fff ; border : 1 px solid var ( -- line ); border-radius : 12 px }
. resource-icon { width : 18 px ; height : 18 px ; fill : none ; stroke : currentColor ; stroke-width : 1.6 ; stroke-linecap : round ; stroke-linejoin : round ; flex-shrink : 0 }
. resource-kind { display : flex ; align-items : center ; gap : 7 px }. resource-table . resource-summary { grid-template-columns : 12 px 116 px minmax ( 0 , 1 fr ) 18 px ; align-items : center }
. resource-table . resource-body { padding : 16 px 20 px 20 px 150 px ; background : #fbfcfc ; border-top : 1 px solid #e6ebe8 }. resource-table . generated-resource . resource-body { background : #f8fafc }
. resource-source { margin : 0 0 14 px ; min-height : 0 }. source-rule-link { display : inline-flex ; align-items : center ; font-size : 12 px ; padding : 7 px 10 px ; border-radius : 6 px }
. resource-detail-list { border : 1 px solid var ( -- line ); border-radius : 8 px ; background : white ; overflow : hidden }
. resource-detail-item { display : flex ; position : relative ; align-items : flex-start ; gap : 14 px ; padding : 14 px 16 px }. resource-detail-item + . resource-detail-item { border-top : 1 px solid var ( -- line )}
. resource-detail-icon { width : 32 px ; height : 32 px ; display : flex ; align-items : center ; justify-content : center ; border : 1 px solid #dce7e1 ; border-radius : 8 px ; background : #f0f5f2 ; color : #54806a ; flex-shrink : 0 ; margin-top : 2 px }
. resource-detail-copy { min-width : 0 ; display : flex ; flex-direction : column ; gap : 6 px ; overflow-wrap : anywhere }. resource-detail-copy strong { font-size : 13 px ; font-weight : 600 ; line-height : 1.5 }. resource-detail-copy small { line-height : 1.5 ; display : block }. resource-detail-label { font-size : 11 px ; color : #6c8075 }
. resource-detail-item . is-flow-step : before { content : '' ; position : absolute ; top : -5 px ; left : 29 px ; width : 6 px ; height : 6 px ; border-right : 1.5 px solid #8aaa97 ; border-bottom : 1.5 px solid #8aaa97 ; transform : rotate ( 45 deg ); background : white ; z-index : 1 }
. resource-actions , . resource-body . route-heading { margin : 14 px 0 0 ; gap : 8 px }. resource-body . route-heading { padding : 0 0 14 px }. resource-actions button , . resource-body . route-heading button { font-size : 12 px }
@ media ( max-width : 700px ) {. resource-inventory { padding : 12 px }. resource-table . resource-summary { grid-template-columns : 10 px 25 px minmax ( 0 , 1 fr ) 15 px }. resource-kind > span { display : none }. resource-table . resource-body { padding : 12 px }. resource-detail-item { padding : 12 px ; gap : 10 px }. resource-detail-item . is-flow-step : before { left : 25 px }. resource-source { justify-content : flex-start }. source-rule-link { text-align : left }. resource-detail-copy strong { font-size : 12 px }}
@ media ( max-width : 700px ) {. resource-table . resource-summary { grid-template-columns : 10 px 66 px minmax ( 0 , 1 fr ) 15 px }. resource-kind { flex-direction : column ; align-items : flex-start ; gap : 5 px }. resource-kind > span { display : block ; font-size : 9 px }}
. resource-table . resource-body { padding : 10 px 18 px 14 px 42 px }. resource-source { margin : 0 0 8 px }. source-rule-link { font-size : 11 px ; padding : 4 px 7 px }
. resource-widget { min-width : 0 }. widget-meta { display : flex ; align-items : center ; flex-wrap : wrap ; gap : 8 px 16 px ; font-size : 11 px ; color : #748379 ; margin-bottom : 10 px }. widget-type { display : inline-flex ; align-items : center ; gap : 6 px ; color : #486153 ; font-weight : 600 }
. widget-chain { display : flex ; align-items : center ; flex-wrap : wrap ; gap : 12 px 24 px }. widget-node { position : relative ; display : flex ; align-items : center ; gap : 8 px ; min-width : 0 ; max-width : 100 % ; padding : 8 px 11 px ; border : 1 px solid #dce5e0 ; border-radius : 7 px ; background : white ; font-size : 12 px ; overflow-wrap : anywhere }
. widget-node > div { min-width : 0 }. widget-node strong { display : block ; font-size : 12 px ; font-weight : 600 ; line-height : 1.5 }. widget-node small { display : block ; font-size : 10 px ; line-height : 1.5 }. widget-node ~ . widget-node : before { content : '' ; position : absolute ; left : -17 px ; top : calc ( 50 % - 3 px ); width : 6 px ; height : 6 px ; border-top : 1.5 px solid #8ba595 ; border-right : 1.5 px solid #8ba595 ; transform : rotate ( 45 deg )}
. widget-order { display : inline-flex ; align-items : center ; justify-content : center ; width : 20 px ; height : 20 px ; border-radius : 50 % ; background : #edf3ef ; color : #5e7e6b ; font-size : 10 px ; flex-shrink : 0 }. person-node { min-height : 38 px }. fallback-node , . route-destination { background : #eef5f1 }. trigger-node { border : 0 ; background : none ; padding-left : 0 ; color : #738578 }. escalation-node { align-items : flex-start }. widget-end { margin : 10 px 0 0 }. widget-end . resource-icon { width : 14 px ; height : 14 px }. widget-condition-list { display : flex ; flex-wrap : wrap ; gap : 5 px ; margin-top : 3 px }. widget-condition { padding : 3 px 6 px ; background : #f2f5f3 ; border-radius : 4 px ; font-size : 11 px }. routing-conditions { flex : 0 1 auto }. routing-widget { align-items : center }
@ media ( max-width : 700px ) {. resource-table . resource-body { padding : 10 px }. widget-chain { gap : 10 px 20 px }. widget-node { padding : 7 px 9 px }. widget-node ~ . widget-node : before { left : -14 px }. widget-meta { gap : 6 px 12 px }. source-rule-link { font-size : 10 px }}
. modal . constructor-modal { width : min ( 1120 px , calc ( 100 vw - 40 px )); max-width : 1120 px }
. rule-constructor . rule-identity { grid-template-columns : minmax ( 0 , 1 fr ) auto !important ; align-items : center ; gap : 16 px }. rule-constructor . rule-identity label { margin : 8 px 0 16 px }. rule-constructor . rule-identity . check { margin : 8 px 0 16 px }
. constructor-layout { display : grid ; grid-template-columns : 260 px minmax ( 0 , 1 fr ); gap : 18 px ; align-items : start }. constructor-inputs { background : #f5f8f6 ; border : 1 px solid var ( -- line ); border-radius : 8 px ; padding : 12 px ; min-width : 0 }. constructor-section + . constructor-section { border-top : 1 px solid var ( -- line ); margin-top : 14 px ; padding-top : 12 px }
. rule-constructor h3 { font-size : 13 px ; margin : 0 }. rule-constructor . section-line { margin : 0 0 10 px ; gap : 8 px ; flex-wrap : wrap }. constructor-loop { border : 1 px solid #dbe5de ; border-left : 3 px solid #94b5a1 ; border-radius : 6 px ; padding : 10 px ; margin-top : 10 px ; background : white }. constructor-loop-title { display : flex ; align-items : center ; justify-content : space-between ; gap : 8 px }. constructor-loop label { margin : 8 px 0 ; gap : 4 px ; font-size : 11 px }. constructor-loop input , . constructor-loop select { width : 100 % ; min-width : 0 }. constructor-predicate { display : grid ; gap : 7 px }. constructor-filter > . check { font-size : 11 px ; line-height : 1.5 ; margin : 10 px 0 }. constructor-empty { font-size : 12 px ; color : #7d8a85 ; padding : 12 px ; border : 1 px dashed #d3dfd7 ; border-radius : 6 px ; margin : 8 px 0 }
. rule-constructor input : not ([ type = checkbox ]), . rule-constructor select , . rule-constructor button { font-size : 12 px ; padding : 7 px 9 px ; min-height : 32 px }. rule-constructor button . text { padding : 3 px 5 px ; min-height : 24 px }. rule-constructor . binding-button { background : white ; color : inherit ; font-size : 11 px ; padding : 7 px 9 px }. constructor-binding { font-family : Consolas , monospace }. constructor-outputs { min-width : 0 }. constructor-outputs > . recipe-section { margin : 0 ; padding : 0 ; border : 0 }. constructor-outputs . generation-block { padding : 12 px ; margin : 10 px 0 ; border-radius : 7 px ; background : #fff }. constructor-outputs . generation-block > . route-heading { padding-bottom : 9 px ; border-bottom : 1 px solid var ( -- line ); gap : 6 px ; flex-wrap : wrap }. constructor-outputs . route-heading > . grow { font-size : 12 px ; min-width : 100 px }. constructor-outputs . badge { font-size : 10 px }
. rule-constructor . binding-grid { gap : 8 px 14 px ; align-items : start }. rule-constructor . recipe-field { position : relative ; min-width : 0 ; padding-top : 6 px }. rule-constructor . recipe-field > label { font-size : 11 px ; margin : 0 0 5 px ; padding-right : 54 px ; line-height : 1.4 }. rule-constructor . recipe-field input , . rule-constructor . recipe-field select { width : 100 % ; min-width : 0 ; margin-top : 0 }. rule-constructor . recipe-field . binding-tweak { position : absolute ; top : 2 px ; right : 0 ; font-size : 10 px !important ; min-height : 20 px ; padding : 2 px 3 px }. rule-constructor . recipe-field . inline-value { margin-top : 5 px }. rule-constructor . generation-step { gap : 6 px ; padding : 8 px 0 ; border-bottom : 1 px solid var ( -- line ); margin : 0 }. rule-constructor . generation-step . flow-arrow { padding : 0 }. rule-constructor . recipe-example { margin-top : 14 px ; padding : 12 px ; background : #f5f8f6 ; border-radius : 7 px }. rule-constructor . recipe-example h3 { margin-bottom : 7 px }. rule-constructor . recipe-example td , . rule-constructor . recipe-example th { padding : 7 px ; font-size : 11 px }
@ media ( max-width : 800px ) {. constructor-layout { grid-template-columns : 1 fr }. constructor-inputs { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 12 px }. constructor-section + . constructor-section { border : 0 ; margin : 0 ; padding : 0 }. modal . constructor-modal { width : calc ( 100 vw - 20 px )}. rule-constructor . binding-grid { grid-template-columns : 1 fr 1 fr }}
@ media ( max-width : 520px ) {. constructor-inputs , . rule-constructor . binding-grid { grid-template-columns : 1 fr }. rule-constructor . rule-identity { gap : 8 px }. rule-constructor . name-composer { flex-wrap : wrap }. constructor-layout { gap : 12 px }}
. compact-preview { margin : 12 px 0 0 !important ; border : 1 px solid var ( -- line ); border-radius : 7 px ; background : #fff ; padding : 0 !important }. compact-preview > summary { display : flex ; align-items : center ; flex-wrap : wrap ; gap : 8 px 14 px ; padding : 9 px 12 px !important ; font-size : 11 px !important ; cursor : pointer ; min-height : 36 px !important }. preview-totals { display : flex ; flex-wrap : wrap ; gap : 10 px ; color : #738478 }. compact-preview-body { padding : 8 px 12 px }. compact-change-list { max-height : 180 px ; overflow : auto }. compact-change { display : flex ; gap : 10 px ; align-items : center ; padding : 6 px 0 ; border-bottom : 1 px solid var ( -- line )}. compact-change > div { min-width : 0 }. compact-change strong , . compact-change small { display : block ; overflow-wrap : anywhere ; line-height : 1.4 }. compact-change strong { font-size : 11 px }. compact-change small { font-size : 10 px ; margin-top : 2 px }. compact-change . badge { font-size : 10 px ; min-width : 58 px ; text-align : center }. compact-preview-body > div > small { font-size : 10 px }. compact-example { border : 1 px solid var ( -- line ) !important ; padding : 0 !important ; margin-top : 12 px !important }. compact-example > summary { font-size : 11 px ; font-weight : 600 ; padding : 9 px 12 px ; cursor : pointer }. compact-example table { font-size : 11 px }. generation-review-bar > . compact-preview { margin : 0 !important ; border : 0 ; border-radius : 0 ; background : transparent ; min-width : 0 }. generation-review-bar . review-actions { padding : 10 px 12 px ; gap : 8 px ; flex-wrap : wrap ; align-items : center }
. binding-popover { position : fixed ; inset : auto ; margin : 0 !important ; padding : 12 px !important ; border : 1 px solid #bacec1 ; border-radius : 9 px ; background : #fff ; box-shadow : 0 12 px 36 px #1b3428 33 ; overflow : auto ; overscroll-behavior : contain ; z-index : 1000 ; color : var ( -- ink ); font-size : 12 px }. binding-popover :: backdrop { background : transparent }. binding-popover > . section-line { position : sticky ; top : -12 px ; background : white ; padding : 8 px 0 ; z-index : 2 ; margin : -4 px 0 8 px ; border-bottom : 1 px solid var ( -- line )}. binding-popover h3 { font-size : 13 px ; margin : 0 }. binding-popover label { font-size : 11 px ; margin : 9 px 0 ; gap : 4 px }. binding-popover input , . binding-popover select , . binding-popover textarea { font-size : 12 px ; padding : 7 px 8 px ; min-width : 0 ; width : 100 % }. binding-popover button { font-size : 11 px ; padding : 5 px 8 px }. binding-popover . two-columns { gap : 10 px ; grid-template-columns : 1 fr 1 fr }. binding-popover . binding-source { padding : 0 }. binding-popover . binding-key { margin : 10 px 0 0 8 px ; padding-left : 10 px }. binding-popover . binding-template { font-size : 11 px ; margin-bottom : 8 px ; max-width : 100 % ; overflow-wrap : anywhere }. binding-popover . info-note { font-size : 10 px ; padding : 7 px ; margin : 7 px 0 }. binding-popover . binding-value-preview { margin-top : 12 px ; padding : 8 px ; border-radius : 5 px }. binding-popover . binding-value-preview textarea { min-height : 65 px ; max-height : 130 px ; font-size : 11 px }. binding-popover . binding-value-preview . section-line { margin : 0 0 5 px }. binding-popover . binding-value-preview strong { font-size : 11 px }. binding-popover . binding-value-preview small { font-size : 10 px }
. rule-constructor . recipe-field { padding-right : 34 px }. rule-constructor . recipe-field > label { padding-right : 0 }. rule-constructor . recipe-field . binding-tweak { top : 26 px ; right : 0 ; font-size : 20 px !important ; border : 1 px solid var ( -- line ); width : 29 px ; height : 32 px ; line-height : 1 ; background : white }. inline-binding { display : flex ; gap : 5 px ; align-items : center ; min-width : 0 }. inline-delay { max-width : 210 px }. inline-delay input { width : 65 px !important ; min-width : 0 }. binding-popup-trigger { font-size : 20 px !important ; padding : 0 7 px !important ; line-height : 1 }. inline-delay . binding-button { max-width : 145 px }. inline-delay > span { font-size : 11 px }
. compact-preview . compact-change-list { max-height : 320 px ; overscroll-behavior : contain }. compact-preview . preview-status { display : inline-block ; padding : 3 px 7 px ; border-radius : 4 px ; font-size : 10 px ; line-height : 1.4 ; font-weight : 500 }. compact-preview . status-create { background : #e5f3eb ; color : #246346 }. compact-preview . status-update { background : #e8effb ; color : #365e98 }. compact-preview . status-remove { background : #fbe9e5 ; color : #a24435 }. compact-preview . status-unchanged { background : #edf0f2 ; color : #626f79 }. preview-list-footer { display : flex ; align-items : center ; justify-content : space-between ; gap : 10 px ; flex-wrap : wrap ; padding-top : 9 px }. compact-preview . preview-list-toggle { font-size : 11 px !important ; padding : 4 px 7 px !important ; min-height : 0 !important ; line-height : 1.4 ; border-radius : 5 px ; font-weight : 500 }. compact-preview . preview-list-toggle : hover { background : #edf3ef }. compact-preview . preview-totals { gap : 6 px }@ media ( max-width : 640px ) {. compact-preview . compact-change-list { max-height : 280 px }}
. rule-result { border : 1 px solid var ( -- line ) !important ; border-radius : 7 px ; padding : 0 !important ; margin-top : 12 px !important }. rule-result > summary { padding : 10 px 12 px ; cursor : pointer ; font-size : 12 px }. rule-result > summary small { margin-left : 12 px ; font-weight : 400 ; color : var ( -- muted )}. rule-result-list { max-height : 260 px ; overflow : auto ; overscroll-behavior : contain }. rule-result-row { display : flex ; gap : 9 px ; padding : 9 px 12 px ; border-top : 1 px solid var ( -- line ); align-items : flex-start }. rule-result-row > div { min-width : 0 }. rule-result-row small { display : block ; font-size : 11 px ; margin-top : 4 px ; overflow-wrap : anywhere }. rule-result-name { display : flex ; align-items : center ; gap : 7 px ; flex-wrap : wrap ; font-size : 12 px }. rule-result-row svg { width : 17 px ; height : 17 px ; flex : none }. rule-result > summary . danger { color : #a24435 }
/* Scalar controls fit their values; references keep room for descriptive names. */
input [ type = number ] { max-width : 110 px ; min-width : 0 }
input [ type = time ] { max-width : 132 px ; min-width : 0 }
input [ type = date ] : not ( . native-date ), . date-field { max-width : 176 px ; min-width : 0 }
. date-field { width : 176 px ; justify-self : start }
. date-field > input : not ( . native-date ) { width : 100 % ; min-width : 0 }
. rule-constructor . recipe-field . compact-scalar-field { width : 210 px ; max-width : 100 % ; justify-self : start }
. rule-constructor . recipe-field . compact-number-field . compact-scalar-field { width : 144 px }
. rule-constructor . compact-scalar-field . inline-value { margin-top : 0 }
. rule-constructor . compact-time-field . compact-scalar-field { width : 166 px }
. rule-constructor . compact-scalar-field . binding-tweak { top : auto ; bottom : 0 }
/* Keep each value picker in the same grid row as its control, below its label. */
. rule-constructor . recipe-field { display : grid ; grid-template-columns : minmax ( 0 , 1 fr ) 29 px ; column-gap : 5 px ; row-gap : 5 px ; padding-right : 0 ; align-items : start }
. rule-constructor . recipe-field > label { grid-column : 1 / -1 ; margin : 0 ; padding : 0 }
. rule-constructor . recipe-field > input , . rule-constructor . recipe-field > div { grid-column : 1 ; grid-row : 2 ; min-width : 0 }
. rule-constructor . recipe-field . binding-tweak { position : static ; grid-column : 2 ; grid-row : 2 ; align-self : start ; margin : 0 }
. rule-constructor . recipe-field . inline-value { margin-top : 0 }
. rule-constructor . recipe-field . check { margin : 0 ; min-height : 32 px ; justify-content : flex-start }
. rule-constructor . recipe-field input [ type = checkbox ] { width : 16 px ; height : 16 px ; min-height : 16 px ; flex : 0 0 16 px ; margin : 0 ; padding : 0 }
. rule-constructor . recipe-field . date-field { width : 100 % }
. generation-review-bar { overflow : hidden }
. generation-review-bar > . compact-preview > summary { padding : 12 px 14 px !important ; justify-content : flex-start ; gap : 8 px 12 px }
. generation-review-bar . preview-totals { flex-wrap : wrap ; gap : 6 px }
. generation-review-bar . preview-status { white-space : nowrap }
. generation-review-bar > . compact-preview > . compact-preview-body { padding : 12 px 14 px }
@ media ( max-width : 700px ) {. generation-review-bar . review-actions { border-top : 1 px solid var ( -- line ); justify-content : flex-start ; padding : 10 px 14 px }}
/* Compact variable tree: values first, schema controls on demand. */
. compact-data-tree { max-height : 52 vh ; overflow : auto ; background : var ( -- surface , #fff )}
. compact-data-tree . data-row { grid-template-columns : minmax ( 130 px , 1 fr ) minmax ( 140 px , 2 fr ) auto ; gap : 8 px ; padding : 6 px 8 px 6 px calc ( 12 px + var ( -- data - depth , 0 ) * 20 px ); border-left : 0 ; background : transparent ; min-height : 43 px }
. compact-data-tree . structure-mode . data-row { grid-template-columns : minmax ( 100 px , 1 fr ) 112 px minmax ( 130 px , 2 fr ) auto }
. compact-data-tree . container-row { background : #f7f9f7 }
. compact-data-tree . data-key { display : flex ; align-items : center ; gap : 5 px ; min-width : 0 ; color : var ( -- ink ); font-family : Consolas , monospace }
. compact-data-tree . data-key > span { overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap }
. compact-data-tree . data-disclosure { border : 0 ; background : none ; padding : 4 px ; width : 23 px ; flex-shrink : 0 }
. compact-data-tree input , . compact-data-tree select { padding : 6 px 8 px ; min-height : 32 px ; margin : 0 }
. compact-data-tree . data-value . actions { flex-wrap : nowrap ; gap : 6 px ; min-width : 0 }
. data-container-preview { overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; min-width : 0 ; flex : 1 ; font-size : 11 px ; color : var ( -- muted )}
. compact-data-tree . data-actions { grid-column : auto ; gap : 2 px }
. compact-data-tree . data-actions button { padding : 4 px ; min-width : 23 px ; font-size : 11 px }
. compact-data-tree . data-value . actions button { padding : 4 px 6 px ; white-space : nowrap ; font-size : 10 px }
@ media ( max-width : 700px ) {. compact-data-tree . data-row , . compact-data-tree . structure-mode . data-row { grid-template-columns : minmax ( 0 , 1 fr ) auto ; padding-left : calc ( 12 px + var ( -- data - depth , 0 ) * 12 px ); gap : 5 px }. compact-data-tree . data-key { grid-column : 1 }. compact-data-tree . data-actions { grid-column : 2 ; grid-row : auto }. compact-data-tree . data-value { grid-column : 1 /- 1 ; grid-row : auto }. compact-data-tree . data-type { grid-column : 1 /- 1 }. compact-data-tree . data-container-preview { max-width : 180 px }}
/* Depth lives in the stylesheet: CSP deliberately rejects inline styles. */
. compact-data-tree . data-depth-0 { --data-depth : 0 }
. compact-data-tree . data-depth-1 { --data-depth : 1 }
. compact-data-tree . data-depth-2 { --data-depth : 2 }
. compact-data-tree . data-depth-3 { --data-depth : 3 }
. compact-data-tree . data-depth-4 { --data-depth : 4 }
. compact-data-tree . data-depth-5 { --data-depth : 5 }
. compact-data-tree . data-depth-6 { --data-depth : 6 }
. compact-data-tree . data-depth-7 { --data-depth : 7 }
. compact-data-tree . data-depth-8 { --data-depth : 8 }
. compact-data-tree . data-depth-9 { --data-depth : 9 }
. compact-data-tree . data-row { position : relative ; --tree-step : 20 px }
. compact-data-tree . data-row :: before { content : "" ; position : absolute ; inset : 0 auto 0 12 px ; width : calc ( var ( -- data - depth , 0 ) * var ( -- tree - step )); background : repeating-linear-gradient ( to right , var ( -- line ) 0 1 px , transparent 1 px var ( -- tree - step )); pointer-events : none }
. compact-data-tree . data-row : not ( . container-row ) . data-key { padding-left : 28 px }
. compact-data-tree . data-key { min-width : 0 }
@ media ( max-width : 700px ) {. compact-data-tree . data-row { --tree-step : 12 px }. compact-data-tree . data-row : not ( . container-row ) . data-key { padding-left : 0 }}
. generation-map { width : calc ( 100 vw - 36 px ); max-width : 1600 px ; height : calc ( 100 vh - 36 px ); max-height : 100 vh ; border : 1 px solid var ( -- line ); border-radius : 16 px ; padding : 0 ; color : var ( -- ink ); background : #fff ; overflow : hidden }
. generation-map :: backdrop { background : #172e24 a6 ; backdrop-filter : blur ( 3 px )}
. generation-map [ open ] { display : flex ; flex-direction : column }. map-heading { display : flex ; align-items : center ; justify-content : space-between ; gap : 18 px ; padding : 20 px 24 px 12 px }. map-heading h2 { margin : 0 ; font-size : 22 px }. map-heading p { font-size : 12 px ; color : var ( -- muted ); margin : 8 px 0 0 }. map-toolbar { display : flex ; align-items : center ; gap : 8 px ; padding : 10 px 24 px ; border-bottom : 1 px solid var ( -- line ); flex-wrap : wrap }. map-toolbar button , . map-heading button { font-size : 12 px ; padding : 7 px 12 px }. map-status { font-size : 11 px ; color : #33764f }. map-status-error { color : #a54432 }. map-layout { display : grid ; grid-template-columns : minmax ( 0 , 1 fr ) 330 px ; flex : 1 ; min-height : 0 }. map-canvas { min-height : 0 ; position : relative ; background-color : #f7faf8 ; background-image : radial-gradient ( #c8d7ce 1 px , transparent 1 px ); background-size : 20 px 20 px ; overflow : hidden }. map-inspector { padding : 18 px ; border-left : 1 px solid var ( -- line ); overflow : auto ; min-width : 0 }. map-inspector label { margin : 0 0 14 px }. map-inspector select { font-size : 12 px ; padding : 8 px ; width : 100 % }. map-inspector h3 { font-size : 16 px ; margin : 14 px 0 7 px ; overflow-wrap : anywhere }. map-inspector h4 { font-size : 12 px ; margin : 18 px 0 8 px }. map-inspector p { font-size : 12 px ; line-height : 1.5 }. map-inspector . actions { margin : 12 px 0 ; gap : 6 px ; flex-wrap : wrap }. map-inspector button { padding : 7 px 10 px ; font-size : 11 px }. map-inputs , . map-resource { border : 1 px solid var ( -- line ); border-radius : 7 px ; margin : 8 px 0 ; overflow : hidden }. map-inspector summary { cursor : pointer ; padding : 10 px ; font-size : 12 px }. map-resource strong { display : block ; margin : 5 px 0 0 }. map-inspector pre { font : 11 px / 1.6 Consolas , monospace ; white-space : pre-wrap ; overflow-wrap : anywhere ; background : #f5f8f6 ; margin : 0 ; padding : 10 px ; max-height : 280 px ; overflow : auto }. map-legend { display : flex ; gap : 16 px ; align-items : center ; flex-wrap : wrap ; border-top : 1 px solid var ( -- line ); padding : 10 px 24 px ; font-size : 10 px ; color : var ( -- muted )}. map-legend span : last-child { margin-left : auto }. map-legend-variable :: before , . map-legend-rule :: before , . map-legend-iteration :: before { content : "" ; display : inline-block ; width : 9 px ; height : 9 px ; border-radius : 3 px ; margin-right : 5 px ; background : #d8c9aa }. map-legend-rule :: before { background : #79a68a }. map-legend-iteration :: before { background : #94add2 }
@ media ( max-width : 700px ) {. generation-map { width : calc ( 100 vw - 12 px ); height : calc ( 100 dvh - 12 px )}. map-heading { padding : 12 px }. map-heading h2 { font-size : 18 px }. map-toolbar { padding : 8 px 12 px }. map-layout { grid-template-columns : 1 fr ; grid-template-rows : minmax ( 180 px , 1 fr ) minmax ( 150 px , 40 % )}. map-inspector { border-left : 0 ; border-top : 1 px solid var ( -- line ); padding : 12 px }. map-legend { padding : 8 px 12 px ; gap : 8 px }. map-legend span : last-child { display : none }}
. map-input-content { padding : 0 12 px 12 px ; max-height : 420 px ; overflow : auto }. map-input-section + . map-input-section { border-top : 1 px solid var ( -- line ); margin-top : 14 px }. map-input-section h4 { color : var ( -- muted ); font-size : 11 px ; margin : 12 px 0 }. map-input-field { margin : 12 px 0 }. map-input-label { display : flex ; gap : 8 px ; justify-content : space-between ; font-size : 11 px ; margin-bottom : 5 px ; color : var ( -- muted )}. map-input-label small { font-size : 9 px }. map-input-value + . map-input-value { border-top : 1 px dashed var ( -- line ); margin-top : 6 px ; padding-top : 6 px }. map-input-token { font-size : 12 px ; overflow-wrap : anywhere ; margin : 3 px 0 }. map-input-token > small { display : block ; font : 10 px Consolas , monospace ; color : var ( -- muted ); margin-bottom : 3 px }. map-input-token strong { font-weight : 500 }. map-reference { border : 1 px solid #dce6df ; background : #f5f8f6 ; border-radius : 6 px ; padding : 7 px 9 px ; display : flex ; gap : 5 px ; flex-wrap : wrap ; align-items : center }. map-reference > small { flex-basis : 100 % }. map-reference-kind { font-size : 10 px ; color : #54836a }. map-reference strong { font-weight : 600 }
. map-source-card { border : 1 px solid var ( -- line ); border-radius : 7 px ; padding : 10 px ; margin : 8 px 0 ; background : #f8faf9 }. map-source-title { display : flex ; align-items : center ; gap : 6 px ; flex-wrap : wrap ; font-size : 12 px }. map-source-title > small { margin-left : auto ; color : var ( -- muted )}. map-source-addresses { display : flex ; flex-direction : column ; gap : 4 px ; margin-top : 7 px }. map-source-addresses code { font : 10 px / 1.5 Consolas , monospace ; overflow-wrap : anywhere ; color : #567565 }. map-source-card > button { margin-top : 6 px ; padding : 3 px 0 }
. map-resource-fields { padding : 0 12 px 12 px ; border-top : 1 px solid var ( -- line )}. map-field-hint { display : block ; font-size : 10 px ; line-height : 1.5 ; color : var ( -- muted ); margin-bottom : 6 px }. map-resource-fields . map-reference > small { flex-basis : auto ; margin : 0 ; min-width : 15 px }. map-resource-fields . map-input-field : last-child { margin-bottom : 0 }
2026-10-07 15:30:31 +01:00
. publication-review { border : 1 px solid var ( -- line ); border-radius : 9 px ; padding : 16 px ; margin-bottom : 22 px ; background : #fff }. publication-review-heading { display : flex ; justify-content : space-between ; align-items : center ; gap : 12 px }. publication-sync { font-weight : 650 }. publication-sync . sync-needed { background : #ffd65a ; color : #493500 ; border : 1 px solid #c79a14 ; box-shadow : 0 0 0 2 px #ffe99c }. publication-draft-note { font-size : 12 px ; color : #76643d ; margin : 9 px 0 }. publication-status { display : flex ; flex-wrap : wrap ; gap : 10 px ; font-size : 12 px ; margin-bottom : 12 px }. publication-status . sync-error { width : 100 % }. publication-review . compact-preview { width : 100 % ; margin-top : 8 px }
. publication-actions { flex-wrap : wrap ; justify-content : flex-end }. publication-workflow { font-size : 12 px ; line-height : 1.5 }. publication-review-heading { flex-wrap : wrap }@ media ( max-width : 650px ) {. publication-actions { justify-content : flex-start }}
. map-address { display : inline-flex ; flex-wrap : wrap ; align-items : baseline ; font : 11 px / 1.8 ui-monospace , monospace ; color : #7c827f }. map-address button , . map-resource-name button , . map-value-link { border : 0 ; background : transparent ; padding : 1 px 0 !important ; font : inherit !important ; cursor : pointer ; text-align : left ; text-decoration : underline ; text-decoration-style : dotted ; text-underline-offset : 3 px }. map-resource-name { white-space : pre-wrap }. map-probe { position : fixed ; inset : auto ; margin : 0 ; width : min ( 390 px , calc ( 100 vw - 24 px )); max-height : min ( 550 px , calc ( 100 dvh - 32 px )); overflow : auto ; border : 1 px solid #b9cfc3 ; border-radius : 12 px ; padding : 16 px ; background : #fff ; color : var ( -- ink ); box-shadow : 0 14 px 55 px #183a34 38 ; font-size : 12 px }. map-probe h3 { margin : 0 ; font-size : 15 px }. map-probe h4 { margin : 16 px 0 8 px }. map-probe . muted { margin : 10 px 0 ; overflow-wrap : anywhere }. map-probe-chain { display : flex ; flex-wrap : wrap ; align-items : center ; gap : 6 px ; margin : 0 ; padding : 0 ; list-style : none }. map-probe-chain li { display : flex ; align-items : center ; gap : 6 px ; min-width : 0 }. map-probe-chain li ~ li :: before { content : "→" ; color : var ( -- muted )}. map-probe-chain button { font-family : ui-monospace , SFMono-Regular , Consolas , monospace ; overflow-wrap : anywhere ; text-align : left }. map-probe-fields { display : flex ; flex-wrap : wrap ; gap : 6 px }. map-probe-actions { margin-top : 16 px ; padding-top : 12 px ; border-top : 1 px solid var ( -- line ); display : flex ; justify-content : flex-end }. map-probe button { font-size : 11 px ; padding : 6 px 8 px }. map-probe-chain . active { background : #e1eee5 }. map-probe-example { border-top : 1 px solid var ( -- line ); padding : 10 px 0 ; max-height : 220 px ; overflow : auto }. map-probe-example . map-input-token { display : flex ; flex-wrap : wrap ; gap : 5 px ; overflow-wrap : anywhere }. map-resource-name button { font-weight : 650 !important }. map-inspector { width : auto }. map-inspector . map-value-link { font-weight : 600 !important }
. config-transfer . config-text { font : 12 px / 1.6 ui-monospace , SFMono-Regular , Consolas , monospace ; tab-size : 2 ; resize : vertical ; min-height : 220 px ; white-space : pre ; overflow : auto }. config-transfer . transfer-preview { max-height : 320 px ; overflow : auto ; margin-top : 16 px }. config-transfer . compact-change { overflow-wrap : anywhere }. config-transfer . actions { margin : 12 px 0 }
. config-guide { min-width : 0 }. config-guide > . section-line { align-items : flex-start ; gap : 12 px }. config-guide > . section-line button { flex-shrink : 0 }. config-guide h3 { font-size : 13 px ; margin : 18 px 0 7 px }. config-guide pre { font : 12 px / 1.65 ui-monospace , SFMono-Regular , Consolas , monospace ; white-space : pre-wrap ; overflow-wrap : anywhere ; margin : 0 ; padding : 12 px ; background : #f4f7f5 ; border : 1 px solid var ( -- line ); border-radius : 8 px }. config-guide . guide-example { background : #edf4ef }@ media ( max-width : 600px ) {. config-guide > . section-line { flex-wrap : wrap }. config-guide pre { font-size : 11 px ; padding : 9 px }}
. site-layout { display : grid ; grid-template-columns : 180 px minmax ( 0 , 1 fr ); gap : 28 px ; align-items : start }. site-tabs { display : flex ; flex-direction : column ; gap : 6 px }. site-tabs button { text-align : left }. site-tabs . active { background : var ( -- ink , #193c34 ); color : white }. site-body { min-width : 0 ; max-width : 1000 px }. site-list { display : grid ; gap : 10 px }. site-row { display : flex ; justify-content : space-between ; align-items : center ; gap : 16 px ; background : white ; border : 1 px solid #dae4df ; border-radius : 12 px ; padding : 16 px }. site-editor , . site-settings-form fieldset { background : white ; border : 1 px solid #dae4df ; border-radius : 12 px ; padding : 20 px ; margin : 20 px 0 }. site-settings-form { max-width : 720 px }. site-settings-form legend { font-weight : 650 ; padding : 0 8 px }. site-settings-form label , . site-editor label { margin : 12 px 0 }. site-settings-form . check , . site-editor . check { display : flex ; align-items : center ; gap : 10 px }. site-settings-form . check input , . site-editor . check input { width : auto }. site-audit-row { border-bottom : 1 px solid #dae4df ; padding : 14 px 0 ; display : flex ; gap : 12 px ; flex-wrap : wrap }. site-audit-row pre { width : 100 % ; white-space : pre-wrap ; overflow-wrap : anywhere ; font-size : 12 px }. site-admin . page-heading { align-items : start }. site-row strong { overflow-wrap : anywhere }@ media ( max-width : 760px ) {. site-layout { grid-template-columns : minmax ( 0 , 1 fr ); gap : 16 px }. site-tabs { flex-direction : row ; flex-wrap : wrap }. site-tabs button { font-size : 12 px }. site-row { padding : 12 px }. site-settings-form fieldset { padding : 14 px }. site-admin . page-heading { flex-wrap : wrap }}
@ media ( max-width : 950px ) {. sidebar . site-nav-label { display : none }. sidebar . site-nav-link { flex-shrink : 0 ; justify-content : center }}
@ media ( max-width : 700px ) {. sidebar nav { min-width : 0 ; flex-wrap : wrap }. sidebar nav : is ( button , a ) { gap : 5 px ; padding : 6 px 4 px }. sidebar-bottom { flex-shrink : 0 }}
