/* ============================================================
   Portrait Grid & Workspace
   ============================================================ */

/* Workspace: the main spreadsheet area between formula bar and status bar */
#workspace {
  flex: 1;
  overflow: hidden;
  background: #FFF;
}

/* Grid wrapper: fills the entire workspace — corner + headers + portrait.
   This is the zoom target: CSS transform: scale + translate is applied here.
   transform-origin is set dynamically by ZoomController. */
#grid-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* Corner cell: intersection of row & column headers */
#corner-cell {
  background: #D4D0C8;
  border: 1px solid;
  border-color: #FFF #808080 #808080 #FFF;
  grid-row: 1;
  grid-column: 1;
}

/* Column headers container */
#col-headers {
  display: flex;
  grid-row: 1;
  grid-column: 2;
  overflow: hidden;
}

.col-header-cell {
  background: #D4D0C8;
  border: 1px solid;
  border-color: #FFF #808080 #808080 #FFF;
  text-align: center;
  font-size: 9px;
  color: #000;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}

/* Row headers container */
#row-headers {
  display: flex;
  flex-direction: column;
  grid-row: 2;
  grid-column: 1;
  overflow: hidden;
}

.row-header-cell {
  background: #D4D0C8;
  border: 1px solid;
  border-color: #FFF #808080 #808080 #FFF;
  text-align: center;
  font-size: 9px;
  color: #000;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}

/* Viewport: contains the portrait canvas */
#viewport {
  grid-row: 2;
  grid-column: 2;
  overflow: hidden;
  line-height: 0;
  background: #FFF;
}

/* Portrait canvas — fills its viewport cell */
#portrait {
  display: block;
  width: 100%;
  height: 100%;
}