{
  "context": "This evaluation assesses the engineer's proficiency in using Textual's layout system, specifically focusing on grid layouts, docking, widget composition, and CSS-based styling. The criteria evaluate proper use of layout-related Textual classes, CSS properties, and composition patterns.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Header widget docking",
      "description": "Uses the dock CSS property or layout='dock' with dock='top' to fix the Header widget at the top of the screen. The header should use the Header class or a widget with appropriate docking configuration.",
      "max_score": 15
    },
    {
      "name": "Footer widget docking",
      "description": "Uses the dock CSS property or layout='dock' with dock='bottom' to fix the Footer widget at the bottom of the screen. The footer should use the Footer class or a widget with appropriate docking configuration.",
      "max_score": 15
    },
    {
      "name": "Grid layout configuration",
      "description": "Creates a container with CSS grid layout using 'display: grid', 'grid-size: 2 2' (or grid-columns and grid-rows), with proper column/row sizing (e.g., 1fr 1fr for equal sizing). The grid should be implemented via CSS or styles attribute.",
      "max_score": 25
    },
    {
      "name": "Widget composition pattern",
      "description": "Uses proper widget composition through the compose() method or mount() to add header, footer, grid container, and the four panel widgets to create the layout hierarchy.",
      "max_score": 15
    },
    {
      "name": "Panel padding styling",
      "description": "Applies padding of 1 cell to all four sides of each panel widget using the padding CSS property (e.g., 'padding: 1') in TCSS or styles attribute.",
      "max_score": 10
    },
    {
      "name": "Panel border styling",
      "description": "Applies visible borders to all four panel widgets using the border CSS property (e.g., 'border: solid' or specific border styles) in TCSS or styles attribute.",
      "max_score": 10
    },
    {
      "name": "Background colors",
      "description": "Sets distinct background colors for the four panels using the background CSS property (e.g., 'background: blue', 'background: green', etc.) to match the specification requirements.",
      "max_score": 10
    }
  ]
}