/* OpenTake identity and application composition. Component behavior/styles use
   the locally bundled official Designsystemet CSS and generated OpenTake theme. */
:root{
  --ot-font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC",sans-serif;
  --ds-font-family:var(--ot-font);
  --ot-sidebar:244px;
  --ot-header:72px;
  --ot-radius:4px;
  font-family:var(--ot-font);
  font-synthesis:none;
  color-scheme:light
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--ot-canvas);
  color:var(--ot-ink);
  font-family:var(--ot-font);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
button,input,textarea,select{
  font:inherit
}
button{
  cursor:pointer
}
button:disabled{
  cursor:not-allowed
}
button,a,input,textarea,select,summary{
  touch-action:manipulation
}
a{
  color:var(--ot-brand)
}
h1,h2,h3,p{
  margin:0
}
h1{
  font-size:28px;
  line-height:1.35;
  font-weight:650;
  letter-spacing:-.025em
}
h2{
  font-size:17px;
  line-height:1.5;
  font-weight:650
}
h3{
  font-size:15px;
  font-weight:650
}
::selection{
  background:var(--ds-color-accent-surface-hover);
  color:var(--ot-ink)
}
[hidden]{
  display:none!important
}
.muted{
  color:var(--ot-muted)
}
.small{
  font-size:13px
}
.mono{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.88em
}
.ot-icon{
  width:20px;
  height:20px;
  display:inline-block;
  flex-shrink:0;
  vertical-align:middle
}
.initial-loading{
  padding:64px;
  font-weight:650
}
.initial-loading span{
  display:block;
  font-weight:400;
  color:var(--ot-muted);
  margin-block-start:12px
}
.skip-link{
  position:fixed;
  inset-block-start:8px;
  inset-inline-start:8px;
  z-index:500;
  padding:10px 16px;
  background:var(--ot-paper);
  border:2px solid var(--ot-brand);
  transform:translateY(-150%)
}
.skip-link:focus{
  transform:none
}
.shell{
  display:grid;
  grid-template-columns:var(--ot-sidebar) minmax(0,1fr);
  grid-template-rows:var(--ot-header) minmax(calc(100vh - var(--ot-header)),auto);
  grid-template-areas:"header header" "sidebar main"
}
.app-header{
  grid-area:header;
  background:var(--ot-paper);
  border-block-end:1px solid var(--ot-line);
  padding-inline:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  position:sticky;
  inset-block-start:0;
  z-index:30
}
.header-brand,.header-actions{
  display:flex;
  align-items:center;
  gap:24px
}
.header-brand{
  min-width:0
}
.header-actions{
  gap:20px
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:24px;
  font-weight:720;
  line-height:1;
  letter-spacing:-1px;
  white-space:nowrap;
  color:var(--ot-ink)
}
.brand-mark{
  width:27px;
  height:27px;
  position:relative;
  display:block;
  flex-shrink:0
}
.brand-mark i{
  position:absolute;
  display:block;
  background:var(--ot-brand)
}
.brand-mark i:nth-child(1){
  width:8px;
  height:27px;
  inset-inline-start:0;
  inset-block-start:0
}
.brand-mark i:nth-child(2){
  height:8px;
  width:27px;
  inset-block-end:0;
  inset-inline-start:0
}
.brand-mark i:nth-child(3){
  height:10px;
  width:10px;
  inset-inline-end:0;
  inset-block-start:0;
  background:var(--ot-signature)
}
.product-label{
  border-inline-start:1px solid var(--ot-line);
  padding-inline-start:22px;
  color:var(--ot-muted);
  font-size:13px
}
.language-control{
  display:flex;
  align-items:center;
  gap:8px
}
.language-control>.ot-icon{
  width:17px;
  color:var(--ot-muted)
}
.language-control .ds-select{
  border:0;
  box-shadow:none;
  background-color:transparent;
  min-height:32px;
  width:auto;
  max-width:150px;
  font-size:13px;
  padding-inline-start:4px
}
.user-context{
  display:flex;
  align-items:center;
  gap:10px;
  border-inline-start:1px solid var(--ot-line);
  padding-inline-start:20px
}
.user-context strong,.user-context small{
  display:block;
  line-height:1.5
}
.user-context strong{
  font-size:13px;
  font-weight:600
}
.user-context small{
  color:var(--ot-muted);
  font-size:11px
}
.sidebar{
  grid-area:sidebar;
  background:var(--ot-paper);
  border-inline-end:1px solid var(--ot-line);
  display:flex;
  flex-direction:column;
  position:sticky;
  inset-block-start:var(--ot-header);
  height:calc(100vh - var(--ot-header));
  padding:24px 16px 20px;
  overflow:auto
}
.workspace-selector{
  display:flex;
  align-items:center;
  gap:11px;
  text-align:start;
  width:100%;
  padding:0 4px 22px;
  background:none;
  border:0;
  border-block-end:1px solid var(--ot-line);
  color:inherit
}
.workspace-selector>.ot-icon{
  width:15px;
  height:15px;
  margin-inline-start:auto;
  color:var(--ot-muted)
}
.context-label{
  display:block;
  font-size:12px;
  color:var(--ot-muted);
  font-weight:400
}
.workspace-selector strong{
  display:block;
  font-size:14px;
  font-weight:650;
  line-height:1.6;
  white-space:normal
}
.nav-section-label{
  font-size:11px;
  color:var(--ot-muted);
  margin:22px 12px 10px
}
.nav{
  display:grid;
  gap:3px
}
.nav>button{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  text-align:start;
  background:transparent;
  border:0;
  border-inline-start:3px solid transparent;
  color:var(--ot-ink);
  font-size:14px;
  padding:11px 12px;
  border-radius:2px
}
.nav>button:hover{
  background:var(--ot-canvas);
  color:var(--ot-brand)
}
.nav>button.active{
  background:var(--ot-subtle);
  color:var(--ot-brand);
  border-inline-start-color:var(--ot-brand);
  font-weight:650
}
.nav .ot-icon{
  width:18px;
  height:18px
}
.nav-count{
  margin-inline-start:auto;
  min-width:21px;
  height:21px;
  text-align:center;
  border:1px solid var(--ds-color-accent-border-subtle);
  background:white;
  font-size:11px;
  color:var(--ot-brand);
  line-height:19px
}
.sidebar-bottom{
  margin-block-start:auto;
  padding:28px 10px 0;
  color:var(--ot-muted);
  font-size:11px
}
.sidebar-bottom p{
  margin-block-start:7px;
  font-size:11px
}
.status-line{
  display:flex;
  align-items:center;
  gap:7px
}
.status-line i{
  display:block;
  width:5px;
  height:5px;
  background:var(--ds-color-neutral-border-default)
}
.main{
  grid-area:main;
  min-width:0;
  outline:none
}
.content{
  max-width:1600px;
  padding:34px 38px 56px;
  margin-inline:auto
}
.page-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-block-end:24px
}
.page-heading h1{
  font-size:27px;
  font-weight:650
}
.page-heading p{
  font-size:14px;
  color:var(--ot-muted);
  margin-block-start:8px;
  max-width:760px
}
.actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.btn{
  border-radius:var(--ot-radius);
  font-size:14px;
  min-height:38px;
  line-height:1.45;
  white-space:normal;
  font-weight:550
}
.btn.small{
  font-size:13px;
  min-height:32px;
  padding:6px 10px
}
.btn.icon{
  min-width:30px;
  min-height:30px;
  padding:4px;
  color:var(--ot-muted)
}
.btn.primary{
  font-weight:600
}
.btn .ot-icon{
  width:17px;
  height:17px
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-block-end:28px;
  border:1px solid var(--ot-line);
  background:var(--ot-paper);
  border-radius:var(--ot-radius)
}
.stat{
  padding:20px 24px;
  min-height:148px;
  border-inline-end:1px solid var(--ot-line);
  position:relative
}
.stat:last-child{
  border:0
}
.stat.primary-stat:before{
  content:"";
  height:3px;
  background:var(--ot-brand);
  inset-inline:0;
  inset-block-start:-1px;
  position:absolute
}
.stat-top{
  display:flex;
  font-size:13px;
  line-height:1.5;
  color:var(--ot-ink);
  font-weight:500
}
.stat-value{
  font-size:37px;
  line-height:1.4;
  letter-spacing:-.04em;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--ot-ink);
  margin-block-start:11px
}
.stat-value small{
  font-size:14px;
  color:var(--ot-muted);
  font-weight:400;
  letter-spacing:0;
  margin-inline-start:5px
}
.stat-note{
  font-size:11px;
  color:var(--ot-muted);
  margin-block-start:8px
}
.progress{
  height:4px;
  background:var(--ds-color-neutral-background-tinted);
  overflow:hidden
}
.progress div{
  height:100%;
  background:var(--ot-brand)
}
.stat .progress{
  margin-block-start:8px
}
.two-col{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr);
  gap:24px;
  margin-block-end:26px
}
.equal-col{
  grid-template-columns:1fr 1fr
}
.panel{
  overflow:hidden;
  --dsc-card-padding:0;
  --dsc-card-content-margin-block:0
}
.panel-header{
  padding:19px 22px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-block-end:1px solid var(--ot-line)
}
.panel-header h2{
  font-size:16px;
  font-weight:650
}
.panel-header p{
  font-size:12px;
  color:var(--ot-muted);
  margin-block-start:5px;
  line-height:1.65
}
.panel-body{
  padding:20px 22px
}
.panel-footer{
  border-block-start:1px solid var(--ot-line);
  padding:12px 22px;
  color:var(--ot-muted);
  font-size:11px;
  line-height:1.7
}
.table-wrap{
  overflow:auto;
  max-width:100%
}
.data-table{
  width:100%;
  border-collapse:collapse;
  text-align:start;
  font-size:13px;
  white-space:nowrap
}
.data-table th{
  font-size:12px;
  font-weight:550;
  color:var(--ot-muted);
  background:var(--ds-color-neutral-surface-tinted);
  padding:11px 16px;
  border-block-end:1px solid var(--ot-line);
  height:43px
}
.data-table td{
  padding:13px 16px;
  border-block-end:1px solid var(--ot-line);
  color:var(--ot-ink);
  height:48px;
  line-height:1.5
}
.data-table tr:last-child td{
  border:0
}
.data-table td strong{
  font-weight:600;
  color:var(--ot-ink)
}
.data-table tbody tr:hover{
  background:var(--ds-color-neutral-surface-hover)
}
.data-table .empty-cell{
  text-align:center;
  padding:40px;
  color:var(--ot-muted)
}
.data-table td:nth-child(n+2){
  font-variant-numeric:tabular-nums
}
.list{
  display:flex;
  flex-direction:column
}
.list-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:14px 0;
  border-block-end:1px solid var(--ot-line)
}
.list-item:first-child{
  padding-block-start:0
}
.list-item:last-child{
  padding-block-end:0;
  border:0
}
.list-content{
  flex:1;
  min-width:0
}
.list-item strong{
  display:block;
  font-size:13px;
  font-weight:550;
  line-height:1.7
}
.list-item p{
  font-size:12px;
  line-height:1.7;
  color:var(--ot-muted);
  margin-block-start:4px
}
.section-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:28px 0 14px
}
.section-title h2{
  font-size:17px
}
.section-title p{
  font-size:12px;
  color:var(--ot-muted);
  margin-block-start:3px
}
.grid-seats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-inline-start:1px solid var(--ot-line);
  border-block-start:1px solid var(--ot-line);
  border-radius:3px;
  overflow:hidden;
  background:var(--ot-paper)
}
.seat{
  padding:16px 18px;
  border-inline-end:1px solid var(--ot-line);
  border-block-end:1px solid var(--ot-line);
  min-height:109px
}
.seat.active{
  background:var(--ot-subtle)
}
.seat-head{
  display:flex;
  align-items:center;
  justify-content:space-between
}
.seat-number{
  font-size:10px;
  letter-spacing:.07em;
  color:var(--ot-muted)
}
.seat strong{
  display:block;
  font-size:13px;
  font-weight:550;
  margin:9px 0 3px
}
.seat p{
  font-size:11px;
  color:var(--ot-muted)
}
.status-dot{
  width:6px;
  height:6px;
  background:var(--ot-line);
  border-radius:50%
}
.status-dot.active{
  background:var(--ot-brand)
}
.empty-state{
  padding:36px 22px;
  text-align:center;
  color:var(--ot-muted);
  font-size:13px;
  line-height:1.8
}
.empty-state strong{
  display:block;
  font-size:15px;
  font-weight:550;
  color:var(--ot-ink);
  margin-block-end:5px
}
.filters{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-block-end:18px
}
.filters .input{
  width:auto;
  min-width:150px
}
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-block-end:18px;
  min-width:0
}
.field label,.field-label{
  font-size:13px;
  font-weight:600;
  color:var(--ot-ink)
}
.field input,.field select,.field textarea,.input{
  width:100%;
  font-size:14px;
  border-radius:3px;
  line-height:1.6;
  background:var(--ot-paper);
  color:var(--ot-ink)
}
.field textarea{
  min-height:100px;
  resize:vertical
}
.field small{
  font-size:12px;
  color:var(--ot-muted);
  line-height:1.65
}
.code-editor{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px!important;
  min-height:410px!important;
  line-height:1.75!important;
  background:var(--ds-color-neutral-surface-default)!important
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.checkbox-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  margin-block-end:14px
}
.checkbox-row input{
  margin-block-start:5px
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.detail-grid label{
  display:block;
  font-size:12px;
  color:var(--ot-muted);
  margin-block-end:5px
}
.detail-grid strong{
  font-size:14px;
  font-weight:550
}
.tabs{
  display:flex;
  gap:16px;
  border-block-end:1px solid var(--ot-line);
  margin-block-end:24px
}
.tabs button{
  padding:12px 4px;
  border:0;
  border-block-end:3px solid transparent;
  background:none;
  color:var(--ot-muted);
  font-size:14px
}
.tabs button.active{
  color:var(--ot-brand);
  border-block-end-color:var(--ot-brand)
}
.version-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:17px 18px;
  border:1px solid var(--ot-line);
  margin-block-end:10px;
  border-radius:3px
}
.version-card.active{
  border-color:var(--ds-color-accent-border-default);
  border-inline-start:3px solid var(--ot-brand);
  background:var(--ds-color-accent-surface-hover)
}
.version-card strong{
  font-size:14px;
  font-weight:600
}
.version-card p{
  font-size:12px;
  color:var(--ot-muted);
  margin-block-start:5px
}
.question-preview{
  padding:16px 0;
  border-block-end:1px solid var(--ot-line)
}
.question-preview:last-child{
  border:0
}
.question-code{
  font-size:11px;
  font-family:ui-monospace,monospace;
  color:var(--ot-brand);
  margin-block-end:7px
}
.question-preview p{
  font-size:14px;
  margin-block-end:6px
}
.question-preview small{
  color:var(--ot-muted);
  font-size:12px
}
.workstation{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:24px;
  align-items:start
}
.call-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:17px 24px;
  border-block-end:1px solid var(--ot-line);
  background:var(--ds-color-accent-surface-hover)
}
.call-identity strong{
  font-size:14px;
  font-weight:600
}
.call-identity p{
  font-size:12px;
  color:var(--ot-muted);
  margin-block-start:4px
}
.question-stage{
  padding:28px;
  min-height:390px
}
.question-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:var(--ot-muted);
  margin-block-end:22px
}
.question-meta span:first-child{
  font-weight:650;
  color:var(--ot-brand);
  letter-spacing:.04em
}
.question-text{
  font-size:25px;
  font-weight:550;
  line-height:1.65;
  letter-spacing:0;
  margin-block-end:18px
}
.question-script{
  font-size:13px;
  color:var(--ot-muted);
  background:var(--ot-canvas);
  border-inline-start:3px solid var(--ds-color-accent-border-default);
  padding:12px 14px;
  margin-block-end:22px;
  line-height:1.8
}
.answer-options{
  display:grid;
  gap:9px;
  margin-block:22px
}
.answer-option{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--ds-color-accent-border-subtle);
  border-radius:3px;
  padding:12px 15px;
  font-size:15px;
  line-height:1.7;
  cursor:pointer
}
.answer-option:hover{
  border-color:var(--ds-color-accent-border-default);
  background:var(--ds-color-accent-surface-hover)
}
.answer-option.checked{
  border-color:var(--ot-brand);
  background:var(--ot-subtle);
  color:var(--ot-brand);
  box-shadow:inset 2px 0 var(--ot-brand)
}
.answer-option input{
  flex:0 0 auto
}
.answer-number{
  font-size:27px!important;
  width:180px!important;
  min-height:54px!important
}
.missing-answers{
  display:flex;
  gap:10px;
  margin-block-start:22px;
  padding-block-start:16px;
  border-block-start:1px solid var(--ot-line)
}
.missing-answers .active{
  background:var(--ds-color-warning-surface-tinted);
  border-color:var(--ds-color-warning-border-default);
  color:var(--ds-color-warning-text-default)
}
.question-navigation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 24px;
  border-block-start:1px solid var(--ot-line);
  background:var(--ds-color-neutral-surface-default)
}
.saved-state{
  font-size:12px;
  color:var(--ds-color-success-text-default)
}
.question-index{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:420px;
  overflow:auto
}
.question-index button{
  display:flex;
  align-items:flex-start;
  gap:10px;
  text-align:start;
  padding:9px 8px;
  border:0;
  background:none;
  border-radius:2px;
  font-size:12px;
  color:var(--ot-muted);
  line-height:1.65
}
.question-index button.current{
  background:var(--ot-subtle);
  color:var(--ot-brand)
}
.question-index button:hover{
  background:var(--ds-color-neutral-surface-hover)
}
.index-num{
  width:20px;
  flex-shrink:0;
  font-variant-numeric:tabular-nums
}
.index-check{
  margin-inline-start:auto;
  color:var(--ds-color-success-text-default)
}
.workstation-aside{
  display:grid;
  gap:20px
}
.answer-summary{
  padding:12px 0;
  border-block-end:1px solid var(--ot-line)
}
.answer-summary:last-child{
  border:0
}
.answer-summary label{
  display:block;
  font-size:12px;
  color:var(--ot-muted);
  margin-block-end:4px
}
.answer-summary p{
  font-size:14px;
  line-height:1.65
}
.recording-player{
  width:100%;
  margin-block:12px;
  height:40px
}
.hash{
  font-size:11px;
  color:var(--ot-muted);
  overflow-wrap:anywhere;
  line-height:1.8;
  font-family:ui-monospace,monospace
}
.audit-details{
  max-width:410px;
  white-space:normal;
  overflow-wrap:anywhere;
  font-size:12px;
  line-height:1.7
}
.page-error{
  padding:25px;
  background:var(--ds-color-danger-surface-tinted);
  border:1px solid var(--ds-color-danger-border-subtle)
}
.page-error p{
  margin-block:10px;
  font-size:14px
}
.inline-review{
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.toolbar-count{
  margin-inline-start:auto;
  font-size:12px;
  color:var(--ot-muted)
}
.audio-upload{
  font-size:12px
}
.metric-bar{
  display:flex;
  align-items:center;
  gap:15px;
  margin-block:12px;
  font-size:13px
}
.metric-bar .progress{
  flex:1
}
.metric-bar strong{
  font-size:12px
}
.mini-progress{
  display:inline-block;
  height:4px;
  width:65px;
  background:var(--ds-color-neutral-background-tinted);
  margin-inline-start:8px;
  vertical-align:middle;
  overflow:hidden
}
.mini-progress div{
  height:100%;
  background:var(--ot-brand)
}
dialog{
  width:min(680px,calc(100vw - 40px));
  padding:0;
  max-height:85vh;
  overflow:auto;
  border:1px solid var(--ds-color-neutral-border-default);
  border-radius:5px;
  color:var(--ot-ink);
  background:var(--ot-paper);
  box-shadow:0 16px 64px color-mix(in srgb, var(--ds-color-neutral-text-default) 18%, transparent)
}
dialog::backdrop{
  background:color-mix(in srgb, var(--ds-color-neutral-text-default) 40%, transparent)
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 26px 17px;
  border-block-end:1px solid var(--ot-line)
}
.modal-head h2{
  font-size:19px
}
.modal-body{
  padding:22px 26px
}
.modal-foot{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding:16px 26px;
  border-block-start:1px solid var(--ot-line);
  background:var(--ds-color-neutral-surface-tinted)
}
.modal-intro{
  font-size:14px;
  color:var(--ot-muted);
  margin-block-end:20px
}
.modal-body .notice{
  margin-block-end:18px
}
.workspace-choice{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border:1px solid var(--ds-color-accent-border-subtle);
  background:var(--ds-color-accent-surface-hover);
  margin-block-end:22px
}
.workspace-choice>div{
  flex:1
}
.workspace-choice strong{
  font-size:14px
}
.workspace-choice p,.workspace-choice small{
  font-size:12px;
  color:var(--ot-muted)
}
.identity-language{
  display:inline-grid;
  vertical-align:top;
  width:calc(50% - 11px);
  padding:18px;
  border:1px solid var(--ot-line);
  margin:0 18px 24px 0
}
.identity-language:nth-child(2){
  margin-inline-end:0
}
.identity-language legend{
  font-size:13px;
  font-weight:600;
  padding-inline:8px;
  color:var(--ot-brand)
}
.toasts{
  position:fixed;
  inset-block-end:24px;
  inset-inline-end:24px;
  z-index:200;
  display:grid;
  gap:10px;
  width:max-content;
  max-width:min(480px,calc(100vw - 48px))
}
.loading-overlay{
  opacity:.6;
  pointer-events:none
}
.footer-note,.eyebrow{
  display:none
}
.mobile-menu{
  display:none
}
.login-shell{
  min-height:100vh;
  background:var(--ot-canvas);
  display:flex;
  flex-direction:column
}
.login-top{
  height:84px;
  background:var(--ot-paper);
  border-block-end:1px solid var(--ot-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:5vw
}
.login-layout{
  flex:1;
  display:grid;
  grid-template-columns:minmax(260px,.85fr) minmax(420px,1.15fr);
  gap:80px;
  width:min(1050px,calc(100% - 80px));
  margin:68px auto 60px;
  align-items:start
}
.login-context{
  padding-block-start:36px
}
.login-context .context-label{
  color:var(--ot-brand);
  font-size:13px;
  font-weight:550;
  margin-block-end:20px
}
.login-context h1{
  font-size:56px;
  letter-spacing:-2px;
  font-weight:680
}
.login-agency{
  font-size:17px;
  color:var(--ot-muted);
  margin-block-start:18px;
  line-height:1.9
}
.login-context-note{
  font-size:13px;
  color:var(--ot-muted);
  max-width:350px;
  line-height:1.9
}
.login-form{
  border:1px solid var(--ot-line);
  border-block-start:3px solid var(--ot-brand);
  background:var(--ot-paper);
  padding:30px 32px 28px;
  border-radius:3px
}
.login-form h2{
  font-size:22px;
  font-weight:650;
  margin-block-end:8px
}
.login-form>p{
  font-size:13px;
  margin-block-end:22px
}
.demo-roles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-block:22px
}
.login-submit{
  width:100%;
  margin-block-start:10px
}
.login-security{
  padding-block-start:20px;
  margin-block-start:20px!important;
  border-block-start:1px solid var(--ot-line);
  font-size:11px!important;
  color:var(--ot-muted);
  margin-block-end:0!important
}
.login-footer{
  display:flex;
  justify-content:space-between;
  padding:20px 5vw;
  border-block-start:1px solid var(--ot-line);
  color:var(--ot-muted);
  font-size:11px
}
.login-form .notice{
  font-size:12px;
  margin-block-end:18px
}
.error-text{
  font-size:13px;
  color:var(--ds-color-danger-text-default)
}
.login-account{
  display:flex;
  gap:10px
}
@media(min-width:1700px){
.content{
  padding-block-start:42px
}}@media(max-width:1250px){
:root{
  --ot-sidebar:220px
}
.content{
  padding:28px
}
.header-actions{
  gap:14px
}
.product-label{
  display:none
}
.stat{
  padding:18px
}
.two-col{
  grid-template-columns:minmax(0,1.45fr) minmax(295px,1fr);
  gap:20px
}
.workstation{
  grid-template-columns:minmax(0,1fr) 280px;
  gap:20px
}
.app-header{
  padding-inline:23px
}
.user-context{
  padding-inline-start:14px
}}@media(max-width:1050px){
.two-col{
  grid-template-columns:1fr
}
.workstation{
  grid-template-columns:1fr
}
.workstation-aside{
  grid-template-columns:1fr 1fr
}
.stats-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.stat:nth-child(2){
  border-inline-end:0
}
.stat:nth-child(-n+2){
  border-block-end:1px solid var(--ot-line)
}
.grid-seats{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.environment-label{
  display:none
}
.header-actions{
  gap:10px
}
.user-context{
  border:0;
  padding:0
}
.user-context>span:last-child{
  display:none
}
.content{
  padding:26px
}
.login-layout{
  gap:40px;
  grid-template-columns:.75fr 1.25fr
}
.login-form{
  padding:26px
}
.login-context h1{
  font-size:48px
}}
@media(max-width:760px){
:root{
  --ot-header:64px
}
.shell{
  display:block;
  padding-block-start:64px
}
.app-header{
  position:fixed;
  inset:0 0 auto;
  min-height:64px;
  padding-inline:16px;
  gap:12px
}
.header-brand{
  gap:12px
}
.brand{
  font-size:21px
}
.brand-mark{
  transform:scale(.85);
  transform-origin:left center;
  margin-inline-end:-3px
}
.header-actions{
  gap:8px
}
.header-actions>.user-context{
  display:none
}
.sidebar{
  position:fixed;
  inset-block:64px 0;
  inset-inline-start:0;
  width:245px;
  height:calc(100vh - 64px);
  z-index:40;
  transform:translateX(-100%);
  box-shadow:none
}
.shell.nav-open .sidebar{
  transform:none;
  box-shadow:15px 0 50px color-mix(in srgb, var(--ds-color-neutral-text-default) 18%, transparent)
}
.mobile-menu{
  display:flex;
  align-items:center;
  padding:5px;
  border:0;
  background:transparent;
  color:var(--ot-muted)
}
.language-control{
  gap:2px
}
.language-control>.ot-icon{
  display:none
}
.language-control .ds-select{
  font-size:12px;
  max-width:110px
}
.content{
  padding:25px 18px 42px
}
.page-heading{
  flex-direction:column;
  gap:17px
}
.page-heading h1{
  font-size:25px
}
.page-heading p{
  font-size:13px
}
.page-heading>.actions{
  width:100%
}
.stat{
  min-height:139px;
  padding:16px
}
.stat-value{
  font-size:33px
}
.stat-note{
  font-size:11px
}
.panel-header,.panel-body{
  padding:17px
}
.panel-footer{
  padding:12px 17px
}
.panel-header p{
  font-size:12px
}
.grid-seats{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.data-table th,.data-table td{
  padding:12px 14px
}
.workstation-aside{
  grid-template-columns:1fr
}
.question-stage{
  padding:23px 20px
}
.question-text{
  font-size:23px
}
.question-navigation{
  padding:15px;
  flex-wrap:wrap
}
.question-navigation .saved-state{
  display:none
}
.form-row{
  grid-template-columns:1fr;
  gap:0
}
.detail-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.filters .input{
  flex:1;
  min-width:130px
}
.version-card{
  flex-wrap:wrap
}
.identity-language{
  width:100%;
  margin-inline-end:0
}
.login-top{
  height:70px;
  padding-inline:22px
}
.login-layout{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:calc(100% - 36px);
  margin:30px auto
}
.login-context{
  padding:0;
  max-width:none
}
.login-context .context-label{
  margin-block-end:10px
}
.login-context h1{
  font-size:35px
}
.login-agency{
  font-size:14px;
  margin-block-start:7px
}
.login-context-note{
  display:none
}
.login-form{
  width:100%;
  padding:23px
}
.login-footer{
  padding:18px 22px
}
.demo-roles{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.role-button{
  padding:11px;
  font-size:12px
}
.modal-head,.modal-body{
  padding:20px
}
.modal-foot{
  padding:15px 20px
}
.workspace-choice{
  align-items:flex-start;
  flex-wrap:wrap
}
.toasts{
  inset-inline-end:16px;
  inset-block-end:16px
}
.section-title{
  align-items:flex-start
}
.actions .btn{
  flex-shrink:0
}}
@media(prefers-reduced-motion:reduce){
*{
  scroll-behavior:auto!important;
  animation:none!important;
  transition:none!important
}}@media print{
.app-header,.sidebar,.actions,.toasts,.skip-link{
  display:none!important
}
.shell{
  display:block;
  padding:0
}
.content{
  padding:0
}
.panel{
  break-inside:avoid;
  --dsc-card-padding:0;
  --dsc-card-content-margin-block:0
}
.main{
  background:var(--ot-paper)
}}
.brand{
  direction:ltr
}
.mono{
  unicode-bidi:isolate
}
html[dir="rtl"] .sidebar{
  transform:none
}@media(max-width:760px){
html[dir="rtl"] .sidebar{
  transform:translateX(100%)
}
html[dir="rtl"] .nav-open .sidebar{
  transform:none
}}

/* Separate stacked operational sections without adding nested cards. */
.content > div > .panel + .panel {
  margin-block-start: 24px;
}
:root, [data-workspace-theme] {
  --ot-ink: var(--ds-color-neutral-text-default);
  --ot-muted: var(--ds-color-neutral-text-subtle);
  --ot-line: var(--ds-color-neutral-border-subtle);
  --ot-canvas: var(--ds-color-neutral-background-tinted);
  --ot-paper: var(--ds-color-neutral-surface-default);
  --ot-brand: var(--ds-color-accent-base-default);
  --ot-signature: var(--ds-color-brand-base-default);
  --ot-subtle: var(--ds-color-accent-surface-tinted);
}
:root {
  --ot-product-brand: #2449b3;
  --ot-product-signature: #b7472a;
  --ot-product-ink: #172b42;
}
.brand {
  color: var(--ot-product-ink);
}
.brand-mark i {
  background: var(--ot-product-brand);
}
.brand-mark i:nth-child(3) {
  background: var(--ot-product-signature);
}
.main, .login-layout {
  background: var(--ot-canvas);
}
.notice {
  --dsc-alert-padding-block: var(--ds-size-3);
  --dsc-alert-padding-inline-end: var(--ds-size-4);
  margin-block-end: 24px;
  font-size: 13px;
  line-height: 1.7;
}
.notice strong {
  margin-inline-end: 5px;
}
.notice.compact {
  margin: 0;
  font-size: 12px;
}
.environment-label {
  white-space: nowrap;
}
.circle-icon {
  display: inline-flex;
  color: var(--ds-color-warning-text-subtle);
  margin-block-start: 2px;
  flex-shrink: 0;
}
.circle-icon.good {
  color: var(--ds-color-success-text-subtle);
}
.empty-icon {
  display: inline-flex;
  color: var(--ot-muted);
  margin-block-end: 10px;
}
.badge {
  white-space: nowrap;
}
.role-button {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  text-align: start;
  min-height: 84px;
  padding: 13px 12px;
  font-size: 12px;
}
.role-button .ot-icon {
  width: 24px;
  height: 24px;
}
.agency-mark {
  flex-shrink: 0;
}
.user-context .ds-avatar {
  flex-shrink: 0;
}
.toast {
  --dsc-alert-padding-block: var(--ds-size-3);
  --dsc-alert-padding-inline-end: var(--ds-size-4);
  font-size: 13px;
}
.workspace-selector {
  border-block-end-color: var(--ds-color-brand-border-subtle);
}





/* Operational monitoring composes the same official controls and tables. */
.ops-filters { display: grid; grid-template-columns: repeat(3,minmax(160px,1fr)); gap: 10px 18px; padding: 18px; background: var(--ot-paper); border: 1px solid var(--ot-line); margin-block-end: 12px; align-items: end; }
.ops-filters .field { margin: 0; }
.ops-filters > .btn { justify-self: start; }
.ops-cutline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--ot-muted); font-size: 12px; margin-block: 12px 18px; }
.ops-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 24px; }
.ops-section { margin-block: 24px; margin-inline: 0; }
.operations-page > div > .panel + .panel { margin-block-start: 24px; }
.ops-measure { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-block: 0 24px; }
.ops-measure p { width: 100%; color: var(--ot-muted); font-size: 13px; }
.ops-settings { display: grid; grid-template-columns: 1fr 1fr; }
.ops-evidence { display: grid; gap: 10px; margin-block: 18px; }
.ops-evidence > div { display: flex; gap: 14px; align-items: center; }
.ops-metadata p { margin-block-end: 10px; }
.ops-metadata pre { font-size: 12px; white-space: pre-wrap; }
.operations-page td small { display: block; white-space: normal; max-width: 260px; }
@media(max-width:1050px) { .ops-filters { grid-template-columns: 1fr 1fr; } }
@media(max-width:760px) { .ops-filters { grid-template-columns: 1fr; } .ops-settings { grid-template-columns: 1fr; } }
.ops-evidence > .ops-evidence-row { display: block; }
.ops-evidence-row > div:first-child { display: flex; align-items: center; gap: 14px; margin-block-end: 10px; }
.ops-evidence-row .notice { margin-block-end: 10px; }
.ops-filter-extra { grid-column: 1 / -1; }
.ops-quality-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding-block-start: 14px; }
@media(max-width:760px) { .ops-quality-fields { grid-template-columns: 1fr; } }
.ops-share-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-block-start: 14px; }
@media(max-width:760px) { .ops-share-fields { grid-template-columns: 1fr; } }

/* Questionnaire studio: Designsystemet controls with specialist authoring layouts. */
.authoring-studio {max-width:1600px;margin-inline:auto}
.studio-toolbar {display:flex;align-items:end;gap:18px;margin:24px 0;flex-wrap:wrap}
.studio-toolbar>.field {flex:1;min-width:220px;margin:0}
.studio-current {display:flex;gap:6px 12px;align-items:center;flex-wrap:wrap;max-width:300px}
.studio-current small {flex-basis:100%;color:var(--ot-muted)}
.studio-tabs {display:flex;gap:6px;flex-wrap:wrap;padding-block:14px;border-block:1px solid var(--ot-line);margin-bottom:22px}
.studio-tabs .active,.studio-question-list .active {background:var(--ds-color-accent-surface-tinted);border-color:var(--ds-color-accent-border-default);color:var(--ds-color-accent-text-default)}
.studio-layout {display:grid;gap:24px;align-items:start}
.studio-layout.with-assistant {grid-template-columns:minmax(0,1fr) minmax(280px,340px)}
.studio-main {min-width:0}
.studio-editor {display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);border:1px solid var(--ot-line);border-radius:var(--ds-border-radius-md);background:var(--ot-paper);overflow:clip}
.studio-meta {margin-bottom:16px;background:var(--ot-paper)}
.studio-meta>div {padding:16px}
.studio-question-list {padding:12px;display:flex;gap:8px;flex-direction:column;background:var(--ds-color-neutral-surface-tinted);border-inline-end:1px solid var(--ot-line);max-height:820px;overflow:auto}
.studio-question-list .question-pick {text-align:start;justify-content:start;max-width:100%;padding:10px;height:auto;background:transparent}
.question-pick>span {display:block;min-width:0;width:100%}
.question-pick small,.question-pick span>span {display:block}
.question-pick small {font-size:11px;letter-spacing:.04em;margin-bottom:4px}
.question-pick span>span {white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:13px;font-weight:450}
.studio-properties {padding:22px;min-width:0}
.studio-property-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.studio-property-heading h2 {font-size:18px;margin:0}
.studio-check {display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.6;cursor:pointer}
.studio-check input[type=checkbox] {appearance:auto;width:17px;height:17px;min-height:0;padding:0;flex-shrink:0;accent-color:var(--ds-color-accent-base-default)}
.studio-checks {display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:22px}
.studio-option {padding:12px;border:1px solid var(--ot-line);border-radius:var(--ds-border-radius-sm);margin-bottom:10px}
.studio-option .field {margin-bottom:8px}
.studio-options {margin:12px 0}
.studio-properties h3 {font-size:14px;margin:20px 0 8px}
.studio-properties>button:last-child {margin-top:18px}
.studio-assistant {border:1px solid var(--ot-line);border-top:3px solid var(--ds-color-accent-border-default);border-radius:var(--ds-border-radius-md);padding:20px;background:var(--ot-paper);position:sticky;top:88px;max-height:calc(100vh - 112px);overflow:auto}
.studio-assistant h2 {display:flex;gap:8px;align-items:center;font-size:17px;margin:0 0 12px}
.studio-assistant>p {font-size:13px;line-height:1.7}
.studio-assistant>button {width:100%}
.studio-assistant>.field {margin-top:16px}
.studio-assistant textarea {min-height:160px}
.studio-provenance {border-top:1px solid var(--ot-line);margin-top:20px;padding-top:16px;font-size:13px}
.studio-provenance h3 {font-size:14px}
.studio-provenance ul {padding-inline-start:20px}
.studio-provenance .source-link {margin-top:12px}
.studio-provenance blockquote {margin:8px 0;padding-inline-start:10px;border-inline-start:2px solid var(--ot-line);white-space:pre-wrap;overflow-wrap:anywhere}
.logic-graph {position:relative;min-width:0;padding-inline-start:100px}
.logic-connectors {position:absolute;inset-inline-start:0;top:0;width:100px;height:100%;overflow:visible}
.logic-connectors path {stroke:var(--ds-color-accent-border-default);fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.6}
.logic-connectors path.invalid-edge {stroke:var(--ds-color-danger-border-default)}
.logic-nodes {display:flex;flex-direction:column;gap:12px}
.logic-node {height:86px!important;min-height:86px;width:100%;justify-content:start!important;text-align:start;padding:10px 14px!important;background:var(--ds-color-neutral-background-default)}
.logic-node>span {display:flex;flex-direction:column;gap:3px;width:100%;min-width:0}
.logic-node strong {font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.logic-node small {font-size:11px;font-weight:400}
.studio-diagnostic-summary {font-size:20px;font-weight:600;margin-bottom:20px}
.diagnostic-item {border-bottom:1px solid var(--ot-line);padding:18px 0}
.diagnostic-item>div {display:flex;align-items:center;gap:10px}
.diagnostic-item p {margin:8px 0;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.studio-diff {padding:18px 0;border-top:1px solid var(--ot-line)}
.studio-diff h3 {font-size:15px;margin:0 0 8px}
.diff-columns {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.diff-columns>div {min-width:0;background:var(--ds-color-neutral-surface-tinted);padding:12px;border-radius:var(--ds-border-radius-sm)}
.diff-columns strong {font-size:12px;color:var(--ot-muted)}
.diff-columns pre {white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;max-height:320px;overflow:auto;margin:8px 0 0}
.studio-run {padding:18px 0;border-top:1px solid var(--ot-line)}
.studio-run>small {display:block;color:var(--ot-muted)}
.preserve-lines {white-space:pre-wrap;overflow-wrap:anywhere}
.route-question {padding-block:20px;border-top:1px solid var(--ot-line)}
.route-question h3 {font-size:14px;margin:0}
.route-question .actions {margin-top:12px}
@media(max-width:1220px){.studio-layout.with-assistant {grid-template-columns:minmax(0,1fr)}.studio-assistant{position:static;max-height:none}.studio-editor{grid-template-columns:minmax(150px,200px) minmax(0,1fr)}}
@media(max-width:760px){.studio-editor{grid-template-columns:minmax(0,1fr)}.studio-question-list{max-height:230px;border-inline-end:0;border-bottom:1px solid var(--ot-line)}.studio-properties{padding:16px}.studio-toolbar{align-items:start}.diff-columns{grid-template-columns:1fr}.logic-graph{padding-inline-start:55px}.logic-connectors{width:55px}.studio-tabs{gap:6px}.studio-tabs .btn{font-size:12px;padding:7px 9px}.studio-current{max-width:none}}

@media(max-width:1220px){.studio-layout.with-assistant>.studio-assistant{grid-row:1}.studio-layout.with-assistant>.studio-main{grid-row:2}}

/* Fieldwork release, sampling and access workflows reuse Designsystemet forms. */
.launch-rule,.presentation-question {padding:18px 0;border-bottom:1px solid var(--ot-line);margin-bottom:16px}
.launch-rule {padding:14px;border:1px solid var(--ot-line);border-radius:var(--ds-border-radius-sm);background:var(--ot-paper)}
.launch-count-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.presentation-question h3 {font-size:14px;margin:0 0 12px}
#modal .studio-check {margin:6px 14px 6px 0}
#modal .mono {overflow-wrap:anywhere}
@media(max-width:600px){.launch-count-grid{grid-template-columns:minmax(0,1fr)}}