/* =============================================================
   Cleaned & Optimised Stylesheet – 2025‑07‑31
   ‑ consolidated rules, removed duplicates, introduced CSS vars
   ============================================================= */

:root{
  /* ---- colour palette ---- */
  --clr-bg-body:     radial-gradient(circle,rgba(59,59,59,1.00) 0%, rgba(37,37,37,1.00) 100%);
  --clr-text-body:   #333;
	--clr-accent:   #D49D26;
	--clr-btn-txt:   #1D1D1D;
  --clr-header-bg:   #FFFFFF;
  --clr-header-btn:  hsl(0 0% 69%);
  --clr-header-btn-h:hsl(0 0% 45%);
  --clr-seg-act-bg:  rgba(255,255,255,.40);
  --clr-beat-line:   #444;
  --clr-danger:      #BB5858;
	  --clr-dangerhover:      #c00000;
	--clr-shadow:      0px 0px 30px hsla(0,0%,0%,0.17);
  --rad-div:      	 10px;

  /* ---- spacing & sizing ---- */
  --btn-py: 5px;        /* button y‑padding */
  --btn-px:10px;        /* button x‑padding */
}

/* ---------------- Base ---------------- */
*{box-sizing:border-box;}
body{
  font: 16px/1.4 "Open Sans", Arial, Helvetica, sans-serif;
  background:var(--clr-bg-body);
  color:var(--clr-text-body);
  margin:0;
}

.logocontainer{
    width: 677px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 64px;
    padding-right: 64px;
    padding-bottom: 64px;
    padding-left: 64px;
}

main{padding:20px;}

header{
	box-shadow: var(--clr-shadow);
	display: flex;
	align-items: center;
	justify-content: flex-start;          /* ensin vasemmalle… */
	  position: relative;
	width: 100%;/* mahdollistaa absoluuttisen keskityksen */
	padding: 10px;
	margin: 8px 0;
	background: var(--clr-header-bg);
	text-align: center;
}

header #headernapit{      /* form tai div jossa Start & Fork */
  margin-left:auto;       /* työntää ryhmän oikeaan reunaan */
  display:flex;
  align-items:center;
}

.header-title-group{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:10px;
}

/* ---------------- Etusivu ---------------- */

#maintitle{
	margin-top: 200px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: auto;
	color: #FFFFFF;
	text-align: center;
}
#login {
	max-width: 400px;
	margin: auto;
	background-color: #FFFFFF;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 60px;
	padding-bottom: 60px;
	border-radius: var(--rad-div);
display:flex;
  align-items:center;
}

/* ---------------- Buttons ---------------- */
button{                           /* default button */
	font-family: inherit;
	font-size: 14px;
	padding: var(--btn-py) var(--btn-px);
	cursor: pointer;
	height: var(--rh);
	background: var(--clr-accent);
	color: var(--clr-btn-txt);
	border-radius: 100px;
	border: none;
	margin-left: 4px;
	margin-right: 4px;
	font-weight: bold;
}
button:hover{background:var(--clr-header-btn-h);}  


.btn-danger{background:var(--clr-danger);color:#fff;font-weight:bold;}
.btn-danger:hover{background:var(--clr-dangerhover);}

/* Header‑buttons share same float originally → now flex‑order manageable */
.header-btn{margin-right:5px;}

.closebtn{
	background-color: hsla(0,0%,0%,0.00);
	font-size: x-large;
	font-variant: normal;
	font-weight: bold;
	float: right;
}

.closebtn:hover{
	background-color: hsla(0,0%,0%,0.00);
	font-size: x-large;
	font-variant: normal;
	font-weight: bolder;
	float: right;
	color: var(--clr-accent);
}
/* ---------------- Timeline ---------------- */
.timeline{

	box-shadow: var(--clr-shadow);
  background:var(--clr-header-bg);
  border:1px solid #999;
  margin-bottom:30px;
  padding:10px;
		border-radius: var(--rad-div);
}
.timeline-header{position:relative;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.timeline-track{
	position: relative;
	height: 60px;
	background: #eee;
	overflow: visible;
	border-width: 1px;
	border-color: #1D1D1D;
}
.timeline-track.has-beats{margin-top:100px;}  /* space for beat labels */

/* ---------------- Segment ---------------- */
.segment{
  position:absolute;inset-block:0;
  padding:3px;
  display:flex;flex-direction:column;gap:4px;
  font-size:12px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.segment .segment-title{font-weight:bold;}
.segment:focus-within{outline:2px solid limegreen;}

/* Drag handles */
.handle{
  position:absolute;top:0;bottom:0;width:8px;
  background:rgba(255,255,255,0.34);
  cursor:ew-resize;
  transition:background .15s,opacity .15s;
  opacity:0;pointer-events:none;
}
.segment.selected .handle,.sequence.selected .handle{opacity:1;pointer-events:auto;}
.handle-left{left:0;} .handle-right{right:0;}
.handle:hover{background:rgba(255,255,255,0.81);outline:1px solid limegreen;} 

/* ---------------- ACT segments ---------------- */

.is-hidden {
  display: none !important;
}

.act-segment{
  position:absolute;z-index:100;border-left:dashed;font-weight:bold;pointer-events:none;
}
.act-segment::after{
  content:attr(data-act) " ";
  position:absolute;left:6px;bottom:4px;
  font-size:12px;font-weight:600;color:var(--clr-text-body);
  background:var(--clr-seg-act-bg);
  padding:3px 5px;
  pointer-events:none;
}


/* ---------------- Beat guide ---------------- */
.beat-line{
  position:absolute;inset-block:0;width:1px;background:var(--clr-beat-line);
  z-index:10;pointer-events:none;
}
.beat-label{
  position:absolute;top:-32px;transform:rotate(-45deg);transform-origin:left bottom;
  font-size:10px;color:var(--clr-beat-line);white-space:nowrap;
  pointer-events:none;z-index:901;
}

/* ---------------- Summary ---------------- */
#summary{
	box-shadow: var(--clr-shadow);
	max-width: 820px;
	margin: auto;
	background-color: #FFFFFF;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 60px;
	padding-bottom: 60px;
	border-radius: var(--rad-div);
	 font-family: "Courier New", Courier, monospace !important;
}
#summary h2{font-size:18px;margin-bottom:8px;}
#summary h3{font-size:16px;margin:20px 0 10px;border-top:1px solid #999;padding-top:10px;}
#summary h4{font-size:14px;margin-bottom:4px;background:#c0c0c0;display:inline-block;font-weight:bold;transition: background 3s ease;}
.summary-highlight {
  background: #25C363 !important;
}

.scene-text{
  font-size:13px;
  margin:0 0 12px;
  cursor:text;
}

.scene-line{
  min-height:1.35em;
  white-space:pre-wrap;
}

.dialogue-line{
  position:relative;
  max-width:58%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}


/* Inline editor */
.inline-edit{font:inherit; font-size:13px;font-family:inherit;outline:none;margin-left:-2px;line-height:1.45;}
.inline-edit-shell{margin:0 0 12px;position:relative;}
.dialogue-edit-shell{position:relative;}
.dialogue-editor-wrap{display:flex;align-items:flex-start;gap:8px;}
.dialogue-gutter{
  width:24px;
  flex:0 0 24px;
  position:relative;
  overflow:hidden;
  user-select:none;
  pointer-events:none;
  align-self:stretch;
}
.dialogue-gutter-line{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  font-size:13px;
  line-height:1.45;
  padding-top:1px;
}
.dialogue-gutter-spacer{
  width:100%;
  flex:0 0 auto;
}
.dialogue-layout-mirror{
  position:absolute;
  left:-99999px;
  top:0;
  visibility:hidden;
  pointer-events:none;
  white-space:pre-wrap;
  overflow-wrap:break-word;
}
.dialogue-line-marker{
  display:inline-block;
  width:0;
  overflow:hidden;
  padding:0;
  margin:0;
}
.inline-scene-edit{width:100%;flex:1 1 auto;min-width:0;resize:vertical;overflow:hidden;min-height:2em;}
.dialogue-toolbar{display:none;gap:6px;flex-wrap:wrap;margin:10px 0 6px;}
.dialogue-toolbar.is-visible{display:flex;}
.dialogue-toolbar button{min-width:38px;padding:4px 8px;font-size:18px;line-height:1.1;}
.dialogue-toolbar button:disabled{opacity:0.45;cursor:default;}
.dialogue-toolbar-floating{position:absolute;left:-72px;top:0;flex-direction:column;margin:0;}
.inline-dialogue-toolbar{left:-72px;}
#segment-editor .dialogue-toolbar-floating{left:-58px;}
.dialogue-status{display:none !important;}

/* Segment editor panel */
#segment-editor{
	box-shadow: var(--clr-shadow);
	padding: 20px;
	margin-bottom: 30px;
	background: #fff;
	border-radius: var(--rad-div);
	
}
#ed-text{
 width: 100%;
  flex:1 1 auto;
  min-width:0;
  resize: vertical;
  overflow: auto;
  min-height: 2em; /* voit laittaa hyvin matalaksi */
  max-height: 60vh;
  line-height:1.45;
}
#ed-label{width:90%;}
#ed-color{width:9%;}

/* ---------------- Timeline settings & modals ---------------- */
.timeline-settings{display:none;}
.timeline-settings.open{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

.modal{

	position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
       background:rgba(0,0,0,0.20);z-index:2000;}
.modal.hidden{display:none;}
.modal-inner{background:hsla(0,0%,100%,0.80);padding:20px;min-width:240px;	box-shadow: var(--clr-shadow);
	border-radius: var(--rad-div);}


/* ---------------- Header form & inputs ---------------- */
#project-name,
#project-author{
  font-size:20px;
  font-weight:bold;
  margin:0;
  font-family:inherit;
  padding:6px 10px;
}
#project-name{width:260px;}
#project-author{width:200px;font-size:16px;font-weight:600;}
#headernapit form{display:inline-block;margin:0;}

main.timeline-page{
  display:block;
}

.timeline-top-row{
  margin-bottom:24px;
}

section.timeline-layout{
  position:relative;
  max-width:1490px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(260px,300px) minmax(0,820px) minmax(260px,300px);
  gap:24px;
  align-items:start;
  justify-content:center;
}

.timeline-main-column{
  grid-column:2;
  min-width:0;
  max-width:820px;
  width:100%;
  margin:0 auto;
}

.scene-track{
  margin-bottom:12px;
}

.sequence-track{
  height:48px;
  background:#f7f7f7;
  border:1px solid #ddd;
  border-radius:8px;
  margin-bottom:10px;
}

.sequence-actions-row{
  display:flex;
  justify-content:flex-start;
}

.sequence{
  position:absolute;
  top:4px;
  bottom:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  background:rgba(0,0,0,0.03);
  border-left:2px solid #5e5e5e;
  border-right:2px solid #5e5e5e;
  cursor:pointer;
  overflow:hidden;
}

.sequence.selected .handle,
.segment.selected .handle{
  opacity:1;
  pointer-events:auto;
}

.sequence:focus-within,
.sequence.selected{
  outline:2px solid limegreen;
}

.sequence-title{
  width:100%;
  text-align:center;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

#segment-editor,
#summary{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

#timeline-notes-panel{
  grid-column:3;
  align-self:start;
  box-shadow:var(--clr-shadow);
  background:#fff;
  border-radius:var(--rad-div);
  padding:20px;
  position:sticky;
  top:24px;
  width:100%;
  max-width:300px;
  margin:0;
  z-index:10;
}

.notes-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

#timeline-notes-panel .notes-title{
  display:block;
  font-weight:700;
  margin:0;
}

#notes-minimize{
  min-width:34px;
  padding:2px 10px;
  font-size:20px;
  line-height:1;
}

#timeline-notes-panel.is-minimized .notes-panel-body{
  display:none;
}

#timeline-notes-panel.is-minimized{
  padding-bottom:14px;
}

.settings-check-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:0;
}

.settings-check-row input{
  margin:0;
}

#timeline-notes{
  width:100%;
  min-height:420px;
  resize:vertical;
  font:14px/1.5 "Open Sans", Arial, Helvetica, sans-serif;
  border:1px solid #ccc;
  border-radius:8px;
  padding:12px;
}

@media (max-width: 1320px){
  section.timeline-layout{
    display:block;
    max-width:900px;
  }

  #timeline-notes-panel{
    position:static;
    width:100%;
    max-width:820px;
    margin:24px auto 0;
  }
}

@media (max-width: 1100px){
  .inline-dialogue-toolbar{
    position:static;
    flex-direction:row;
    margin:0 0 6px;
  }
}

@media (max-width: 980px){
  .header-title-group{
    position:static;
    transform:none;
    margin-left:12px;
    flex:1 1 auto;
    justify-content:center;
    flex-wrap:wrap;
  }

  header{
    flex-wrap:wrap;
    gap:8px;
  }

  #project-name,
  #project-author{
    width:min(100%, 260px);
  }
}

/* ---------------- v9 dashboard & collaboration ---------------- */
.button-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--btn-py) var(--btn-px);
  background:var(--clr-accent);
  color:var(--clr-btn-txt);
  border-radius:100px;
  font-weight:bold;
  text-decoration:none;
  margin-left:4px;
  margin-right:4px;
}
.button-link:hover{background:var(--clr-header-btn-h);}
.save-indicator{
  margin-left:8px;
  font-size:13px;
  color:#555;
  min-width:62px;
}
.save-indicator[data-state="saving"]{color:#8a6700;}
.save-indicator[data-state="error"]{color:#b10000;}
.dashboard-header{
  justify-content:space-between;
  padding-inline:24px;
}
.dashboard-brand{font-size:24px;font-weight:700;}
.dashboard-userbar{display:flex;align-items:center;gap:12px;}
.pill{background:#efefef;border-radius:999px;padding:6px 12px;font-weight:600;}
.dashboard-main{max-width:1180px;margin:0 auto;padding:32px 20px 48px;}
.auth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.auth-card{
  background:#fff;
  border-radius:var(--rad-div);
  box-shadow:var(--clr-shadow);
  padding:28px;
}
.stack-form{display:grid;gap:14px;}
.stack-form label{display:grid;gap:6px;font-weight:600;}
.stack-form input{padding:10px 12px;border:1px solid #c7c7c7;border-radius:8px;font:inherit;}
.auth-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.auth-links a{color:#333;}
.muted{color:#666;}
.flash{margin-bottom:18px;padding:14px 16px;border-radius:10px;background:#fff;box-shadow:var(--clr-shadow);}
.flash-error{border-left:4px solid #b10000;}
.flash-success{border-left:4px solid #2f8f3f;}
.dashboard-actions{margin-bottom:24px;}
.create-project-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap;}
.create-project-row .grow{flex:1 1 320px;display:grid;gap:6px;font-weight:600;}
.create-project-row input{padding:10px 12px;border:1px solid #c7c7c7;border-radius:8px;font:inherit;}
.project-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;}
.project-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.project-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px;border:1px solid #ececec;border-radius:10px;}
.project-meta{font-size:13px;color:#666;margin-top:4px;}
.project-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.project-actions form{margin:0;}
.single-card-wrap{max-width:560px;}
.narrow-card{margin:0 auto;}
.collaborator-panel{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #e3e3e3;
  display:grid;
  gap:10px;
}
.collaborator-tags{display:flex;flex-wrap:wrap;gap:8px;}
.collaborator-chip{display:inline-flex;align-items:center;gap:6px;background:#f1f1f1;border-radius:999px;padding:6px 10px;font-size:13px;}
.collaborator-remove{min-width:24px;padding:0 6px;line-height:1.2;font-size:16px;background:#ddd;}
.collaborator-form{display:flex;gap:8px;flex-wrap:wrap;}
.collaborator-form input{flex:1 1 220px;padding:8px 10px;border:1px solid #c7c7c7;border-radius:8px;font:inherit;}
.collaborator-status{font-size:13px;color:#666;min-height:1.2em;}
#ed-text{overflow:auto;max-height:60vh;}
@media (max-width: 960px){
  .header-title-group{position:static;transform:none;margin:0 auto;}
  header{flex-wrap:wrap;gap:10px;}
  #headernapit{margin-left:0;width:100%;justify-content:flex-end;}
}

.modal-share{max-width:640px;width:min(92vw,640px);}
.collaborator-status.is-error{color:#b42318;}

.segment.is-locked-by-other {
  outline: 2px dashed rgba(130, 130, 130, 0.85);
  opacity: 0.8;
}

.segment.is-locked-by-other::after {
  content: "🔒";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 12px;
}

.summary h4.is-locked-by-other,
.summary .scene-text.is-locked-by-other {
  background: rgba(0, 0, 0, 0.04);
}

/* ---------------- v12 layout, sticky notes, share ---------------- */
header{
  margin:0 0 8px;
}

main.timeline-page{
  width:100%;
  max-width:none;
  padding:20px 20px 40px;
}

.timeline-top-row,
.timeline-top-row .timeline,
.timeline{
  width:100%;
  max-width:none;
}

section.timeline-layout{
  max-width:1968px;
  grid-template-columns:minmax(0, 550px) minmax(0, 820px) minmax(0, 550px);
  gap:24px;
}

.timeline-main-column{
  grid-column:2;
  position:relative;
  overflow:visible;
}

#timeline-notes-panel{
  grid-column:3;
  justify-self:end;
  width:min(100%, 280px);
  background:#f8ea79;
  border:1px solid rgba(0,0,0,0.08);
}

#timeline-notes,
#timeline-notes::placeholder{
  background:#fff6b3;
}

#timeline-notes{
  background:#fff6b3;
  border-color:rgba(0,0,0,0.15);
}

.scene-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 240px;
  gap:24px;
  align-items:start;
  margin:0 -264px 18px 0;
  padding-right:264px;
}

.scene-main{
  position:relative;
  min-width:0;
}

.scene-header-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.scene-sticky-notes{
  position:static;
  width:240px;
  z-index:4;
}

.scene-sticky-notes-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin-bottom:10px;
}

.scene-sticky-notes-header .add-sticky-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  min-width:44px;
  padding:4px 12px;
  font-size:12px;
  overflow:hidden;
  white-space:nowrap;
  transition:min-width .18s ease, gap .18s ease, padding .18s ease;
}

.scene-sticky-notes-header .add-sticky-note .add-sticky-note-plus{
  display:inline-block;
  line-height:1;
}

.scene-sticky-notes-header .add-sticky-note .add-sticky-note-label{
  max-width:0;
  opacity:0;
  overflow:hidden;
  transition:max-width .18s ease, opacity .18s ease, margin-left .18s ease;
}

.scene-sticky-notes-header .add-sticky-note:hover,
.scene-sticky-notes-header .add-sticky-note:focus-visible{
  justify-content:flex-start;
  gap:6px;
  min-width:112px;
}

.scene-sticky-notes-header .add-sticky-note:hover .add-sticky-note-label,
.scene-sticky-notes-header .add-sticky-note:focus-visible .add-sticky-note-label{
  max-width:80px;
  opacity:1;
}

.scene-sticky-notes-stack{
  display:grid;
  gap:12px;
}

.sticky-note-card{
  background:#f8ea79;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  padding:12px;
}

.sticky-note-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.sticky-note-card-title{
  font-weight:700;
  font-size:13px;
  line-height:1.3;
  color:#5e4f00;
}

.sticky-note-card-actions,
.sticky-note-tools{
  display:flex;
  align-items:center;
  gap:6px;
}

.sticky-note-tools{
  justify-content:space-between;
}

.sticky-note-tools-left{
  display:flex;
  align-items:center;
  gap:6px;
}

.sticky-note-delete{
  margin-left:auto;
}

.sticky-note-card button,
.sticky-note-tools button,
.share-link-row button{
  border-radius:999px;
}

.sticky-note-card-body{
  display:grid;
  gap:10px;
  margin-top:10px;
}

.sticky-note-card.is-minimized .sticky-note-card-body{
  display:none;
}

.sticky-note-text{
  width:100%;
  min-height:120px;
  resize:vertical;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:10px;
  padding:10px 12px;
  font:14px/1.45 "Open Sans", Arial, Helvetica, sans-serif;
  background:#fff8c7;
}

.sticky-note-links,
.sticky-note-attachments{
  display:grid;
  gap:8px;
}

.sticky-note-link-item,
.sticky-note-file,
.sticky-note-image-wrap{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  background:rgba(255,255,255,0.5);
  border-radius:10px;
  padding:8px 10px;
}

.sticky-note-link-item a,
.sticky-note-file a{
  min-width:0;
  word-break:break-word;
  color:#2f4f9a;
}

.sticky-note-image-wrap{
  flex-direction:column;
  align-items:stretch;
}

.sticky-note-image{
  width:100%;
  display:block;
  border-radius:10px;
}

.sticky-attachment-delete,
.sticky-link-delete,
.sticky-note-delete,
.sticky-note-toggle{
  align-self:flex-start;
  min-width:34px;
  min-height:34px;
  padding:4px 8px;
  line-height:1;
}

.dialogue-toolbar{
  gap:4px;
}

.dialogue-toolbar button{
  min-width:32px;
  width:32px;
  height:32px;
  padding:0;
  border-radius:999px;
  font-size:16px;
}

.dialogue-toolbar-floating{
  left:-42px;
}

.inline-dialogue-toolbar{
  left:-42px;
}

#segment-editor .dialogue-toolbar-floating{
  left:-36px;
}

.dialogue-editor-wrap{
  gap:4px;
}

.dialogue-gutter{
  width:18px;
  flex-basis:18px;
}

.dialogue-gutter-line{
  font-size:12px;
}

.share-popup-section{
  display:grid;
  gap:8px;
  margin-top:10px;
  padding-top:8px;
  padding-bottom:12px;
  border-bottom:1px solid #e3e3e3;
}

.share-link-row{
  display:flex;
  gap:8px;
}

#share-link-input{
  flex:1 1 auto;
  min-width:0;
  padding:10px 12px;
  border:1px solid #c7c7c7;
  border-radius:10px;
  font:inherit;
}

@media (max-width: 1600px){
  section.timeline-layout{
    grid-template-columns:minmax(0, 380px) minmax(0, 820px) minmax(0, 380px);
  }
  .scene-sticky-notes{width:220px;}
  #timeline-notes-panel{width:min(100%, 250px);}
}

@media (max-width: 1320px){
  section.timeline-layout{
    display:block;
    max-width:980px;
  }
  .scene-row{
    display:block;
    margin-right:0;
    padding-right:0;
  }
  .scene-sticky-notes{
    position:static;
    width:auto;
    margin:10px 0 0;
  }
  #timeline-notes-panel{
    position:static;
    width:100%;
    max-width:820px;
    margin:24px auto 0;
  }
}

/* ---------------- v12 alignment hotfix ---------------- */
section.timeline-layout{
  position:relative;
  display:block;
  width:100%;
  max-width:none;
}

.timeline-main-column{
  position:relative;
  overflow:visible;
  width:min(820px, calc(100vw - 420px));
  max-width:820px;
  min-width:0;
  margin:0 auto;
}

#segment-editor,
#summary{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

#timeline-notes-panel{
  position:absolute;
  right:0;
  top:0;
  width:280px;
  max-width:280px;
  min-width:0;
  margin:0;
}

.scene-row{
  position:relative;
  display:block;
  margin:0 0 18px;
  padding-right:0;
  transition:min-height 0.15s ease;
}

.scene-sticky-notes{
  position:absolute;
  left:calc(100% + 64px);
  top:0;
  width:240px;
  z-index:4;
}

@media (max-width: 1600px){
  .timeline-main-column{
    width:min(820px, calc(100vw - 380px));
  }

  .scene-sticky-notes{
    left:calc(100% + 48px);
    width:220px;
  }

  #timeline-notes-panel{
    width:250px;
    max-width:250px;
  }
}

@media (max-width: 1320px){
  .timeline-main-column{
    width:min(820px, 100%);
  }

  .scene-sticky-notes{
    position:static;
    width:auto;
    margin:10px 0 0;
  }

  #timeline-notes-panel{
    position:static;
    width:100%;
    max-width:820px;
    margin:24px auto 0;
  }
}